Как Добавить Favicon для Сайта

Фавикон — это небольшое изображение, которое отображается во вкладке браузера рядом с тегом title, также его можно увидеть в сниппете страницы в поисковой выдаче. Фавикон играет значительную роль для сайта.

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

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

Каким должен быть фавикон

Чаще всего для фавикона используют изображение в формате ico размером 16х16 или 32х32. Сейчас многие браузеры поддерживают и другие форматы (jpeg, png, svg). Но все же рекомендуется использовать традиционный формат, чтобы добиться корректного отображения во всех браузерах.

Изображение для фавикона используют разные. Основной принцип: изображение должно быть простым и запоминающимся. Можно выбрать один из нижеперечисленных вариантов:

Логотип компании. Это первое, что по логике должно быть на фавиконе. Но его использование не всегда уместно. Например, если логотип состоит из мелких элементов или имеет сложный дизайн.
Узнаваемый элемент бренда. Если в фирменном стиле компании используются простые, но узнаваемые элементы.
Изображение, которое ассоциируется с деятельностью компании.
Яркое изображение, не относящееся к вашей тематике. Чтобы привлечь внимание в качестве фавикона можно использовать любое яркое изображение, которое выделит вас среди конкурентов.

Установить фавикон на сайт не сложно, процесс занимает совсем немного времени. Существует несколько способов установки фавикона на сайт.

Автоматическое добавление фавикона

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

Подготовленные файлы нужно распаковать. Это должно быть квадратное изображение. Существует множество сервисов для конвертирования графических изображений в формат ico.
Подготовленный файл нужно скачать и переименовать в favicon.ico. Это основное условие для того, чтобы браузер смог распознать нужный файл.
Загрузите готовый файл в корневую папку сайта на хостинге. Для этого понадобится доступ к FTP клиенту или файловому менеджеру. Когда файл будет загружен. браузеры автоматически будут выводить изображение фавикона.

Добавление фавикона через код

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

Но процесс может упростить сервис http://realfavicongenerator.net/. Чтобы получить набор файлов для фавикона, достаточно загрузить на сервис свой файл, далее сделать несколько простых шагов:

фавикон realfavicongenerator

Сервис предложит вам настроить отображение иконки в разных операционных системах. Тут нужно выбрать цвет фона иконки на разных платформах.

Укажите, в каких браузерах будет использоваться фавикон.
После этого нужно нажать на кнопку, после чего система генерирует набор файлов в формате zip и код.
Скачать полученный архив на свой компьютер или в облачное хранилище.
Через файловый менеджер или FTP загрузите и распакуйте архив в корень сайта.
Код, который вы получили при генерации файлов, нужно вставить в тег <head>.

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

favicon пример кода

Индексация фавикона поисковыми системами

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

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

Для Google - https://www.google.com/s2/favicons?domain=ваш-домен
Для Яндекса - https://favicon.yandex.net/favicon/ваш-домен

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