Фавикон: зачем он нужен и как его создать

В статье мы разберём, что такое фавикон и какую роль он играет в визуальном оформлении сайта. Вы узнаете, зачем нужна иконка сайта, которая отображается рядом с заголовком во вкладке браузера и в результатах поиска.

Что это?

Фавикон (Favicon) — это иконка сайта, которая отображается рядом с заголовком во вкладке браузера, а также в результатах поиска. Её задача — привлекать внимание и быть запоминающейся для посетителей, дополняя визуальный стиль веб-сайта.

Где встречается фавикон

Фавикон можно увидеть в разных местах:

на вкладке с открытым сайтом, рядом с названием;
на панели и в списке закладок;
в разделе «История» со списком посещённых страниц;
на мобильных устройствах при добавлении страницы на главный экран.

В результатах поиска через Яндекс фавикон находится перед названием и кратким описанием ссылки, что упрощает ориентирование по выдаче. Если у сайта нет своего фавикона, то вместо него будет иконка CMS.

На сайте может быть множество подобных значков, к примеру, отдельный значок для каждой страницы.

Зачем нужен фавикон

Хотя наличие или отсутствие фавикона, а также его внешний вид не влияют на выдачу при поиске, он всё же имеет значение для пользователей. Если пользователь однажды посетил сайт и остался доволен, то удачно подобранный фавикон поможет ему запомнить сайт и вернуться на него снова.

У фавиконов есть несколько преимуществ:

они делают сайт более привлекательным для пользователя;
уникальный стиль сайта проще запоминается;
сайт проще отыскать в открытых вкладах, в истории просмотров и в сохранённых закладках;
наличие фавикона делает ресурс более надёжным в глазах посетителей.

Требования к размеру и стилю фавикона

При создании фавикона важно учитывать следующие моменты:

соотношение сторон;
размер;
читаемость на экранах разной диагонали;
визуальное оформление.

Главные принципы при подборе будущей миниатюры:

соответствие тематике сайта;
яркость и контрастность;
уникальность;
читаемость, отсутствие мелких элементов;
статичность;
квадратная форма.

Советы по самостоятельному созданию и загрузке миниатюры

Для создания фавикона можно использовать онлайн-сервисы. С их помощью можно быстро сделать значок и сохранить его в нужном формате и соотношении сторон.

Стандартное имя файла для фавикона — favicon.ico, но вместо ico у него может быть и другое расширение. Сам файл загружается в корневой каталог сайта.

Проверка правильности отображения

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

для Яндекса — https://favicon.yandex.net/favicon/xxx;
для Google — https://www.google.com/s2/favicons?domain=xxx.

Вместо xxx укажите адрес интернет-ресурса, который проверяется.

Подведение итогов

Чтобы создать фавикон, выполните следующие шаги:

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