#РАЗРАБОТКА #SEO

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

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

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

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

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

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

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

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

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

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

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

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

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

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