Выбираем иконку

Исходя из того, что на картинке с фотостока изображений, скорее всего, несколько, необходимо вырезать желаемое. Допустимо для данной операции воспользоваться программным продуктом Photoshop. В данном ПП нужно выбрать такой инструмент как «Прямоугольное выделение», указанное стрелочкой на панели сбоку. Далее указываем точные размеры, посредством указание параметров на панели сверху. Эта процедура необходима для того, чтобы придать картинке квадратную форму. В том случае, если она по каким-то причинам будет прямоугольной, при проведении автоматической обрезки могут быть обрезаны необходимые детали. Размер лучше подбирать фиксированный, скажем 54 * 54, чтобы при вписывании в квадрат оставался минимум свободного белого пространства. Далее нужно выбрать Изображение и дальше в меню Кроп, после чего сохранить результат.

Теперь необходимо из сохраненного изображения получить непосредственно сам фавикон. Данная процедура доступна посредством использования одного из множества Online-сервисов, которые позволяют перевоплотить стандартный формат Jpg в формат фавикона – ico. Можно воспользоваться одноименным ресурсом, под названием favicon.ru, который достаточно удобен и понятен. Производим открытие страницы и выбираем «Обзор». Далее выбираем сохраненную картинку и активируем функцию «создать favicon.ru», после чего сервисом автоматически изображение будет преобразовано в иконку. Теоретически иконка готова, но она еще расположена на белом фоне, что будет смотреться некорректно в случае использования подсветки строки адреса. Фон фавикона необходимо сделать прозрачным, для чего нужно выбрать пункт «Редактировать иконку», что позволит воспользоваться графическим online-редактором, в котором белый фон посредством карандаша закрашиваем прозрачным. Производим сохранение и нажимаем Create favicon. Осуществляем скачивание фавикона.

Загружаем фавиконку на сайт

Для того, чтобы фавикон корректно работал в любом поисковике или браузере, необходимо указать к нему путь. Файл лучше поместить в корневой каталог сайта, что позволит в большинстве случаев ему появляться в автоматическом режиме. После этой процедуры, необходимо в хедере полностью прописать путь к иконке. В рассматриваемой ситуации это может выглядеть следующим образом:

Ждем обновления в поисковых системах.