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

Мини-логотип, иконка, фавикон, фавиконка — всё это одни и те же термины, которыми называют маленький значок сайта перед его веб-адресом. Основная задача фавикона — выделить сайт среди конкурентов в поисковой выдаче. Рассказываем, для чего нужна иконка, как ее создать и внедрить на свой ресурс.

Что такое фавикон

Фавикон — мини-логотип сайта, который видят пользователи в сниппете в результатах поиска, на открытой вкладке браузера, в закладках или в истории просмотров.

Посмотрим, как выглядит и где можно увидеть фавикон.

В мобильном и десктопном поиске Google и Яндекса.

Например, введем запрос «купить зеркальный фотоаппарат в Москве». В выдаче мы видим сайты интернет-магазинов цифровой техники. Перед каждым названием и URL стоит мини-логотип, который отличает сайты один от другого. Это и есть фавикон.

Вот так он выглядит в выдаче Google:

а вот так фавиконы выглядят в выдаче Яндекса:

То есть вид фавикона для сайта не меняется в зависимости от выбранной пользователем поисковой системы.

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

Вот так это выглядит в браузере:

В истории браузера. В истории браузера отображаются все сайты, которые пользователь посетил за последнее время. Кроме адреса страницы показывается и favicon сайта:

Фавиконы в истории браузера Chrome

В закладках. Если пользователь сохранил страницу в закладках, то в панели закладок сохранится ее адрес с мини-логотипом.

Вот так это выглядит в Chrome:

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

Вот так это выглядит в избранном Яндекса:

В часто посещаемых сайтах. На главной странице Chrome пользователю по умолчанию показываются наиболее посещаемые сайты — отображается фавикон и название сайта/закладки. При необходимости можно добавить сайт на главную страницу самостоятельно.

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

Реклама. ООО “Клик.ру”, ИНН:7743771327, ERID: 2VtzqwTryp8

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

Существует как минимум четыре причины, чтобы сделать фавикон для сайта.

Задачи, которые можно решить с помощью фавикона:

1. Выделить сайт среди конкурентов. Например, пользователь ищет протеин на поиске. Он заходит на один сайт, на другой, третий. Оставляет вкладки открытыми и автоматически запоминает, что на одном сайте цена на протеин выше, на втором — ниже. Уже по иконке пользователю легче сориентироваться, куда перейти.

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

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

4. Увеличить доверие аудитории. Пользователи больше доверяют и обращают внимание не на безликий продукт, а на компании «с именем». Логотип — часть фирменного стиля компании. Поэтому присутствие мини-лого перед адресом сайта уже сигнализирует целевой аудитории, что компания уделяет внимание маркетингу.

Требования поисковых систем к фавикону

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

Визуальная составляющая: что учитывать

Если смотреть на фавикон только как на картинку, нужно учитывать такие требования к визуалу:

Размер. Фавиконка имеет квадратную форму. Требования к размеру зависит от поисковой системы, где будет показываться мини-логотип. Минимальный размер — 16х16 pcs.
Читаемость. Иконка может представлять собой графическое изображение или сочетание букв и графики. В любом случае, значки и буквы должны читаться и на поиске, и на вкладках.
Фирменный стиль. Самое простое и логичное решение — перевести логотип компании в микро-формат и сделать фавикон. Если это невозможно, нужно разрабатывать фавикон с учетом фирменного стиля.

Приведем несколько примеров узнаваемых фавиконов.

Фавикон ВКонтакте — уменьшенная копия логотипа:

А вот, например, у бренда «Город игрушек» фавикон не копирует логотип, но выдержан в фирменном стиле — на нем также изображены сказочные домики.

Вот так выглядит фавикон:

а вот так логотип:

Требования Яндекса к фавикону

Для отображения фавиконки на поиске в Яндексе нужно учесть такие требования:

Размер. Допустимые размеры: 120х120, 32х32 и 16х16 pcs.
Формат. Рекомендуемый формат — SVG. Также допустимо создание фавикона в формате ICO, GIF, JPEG, PNG, BMP.

Для того чтобы иконка сайта была заметнее на поиске Яндекса и четче отображалась, рекомендуем создавать фавиконы в формате SVG или размером 120х120 pcs.

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

Ускорить процесс индексации изменений можно через Яндекс Вебмастер. Для этого перейдите в раздел «Индексирование» — «Переобход страниц» и отправьте главную страницу сайта на переобход. В этом случае обновление фавикона в результатах поиска Яндекса пройдет в течение трех дней.

Полное руководство по Яндекс Вебмастеру — здесь.

Требования Google к фавиконке

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

Технические требования к фавиконам:

Размер. Значок должен быть квадратным, а его размер — кратным 48. То есть 48х48, 96×96, 144х144 pcs.
Формат. Для отображения фавиконки во всех браузерах лучше отдать предпочтения формату ICO для сайта, а также PNG и GIF (без анимации). Также можно создать фавикон в формате SVG, но он не поддерживается Internet Explorer. Аналогичная ситуация с форматом JPEG — он поддерживается всеми браузерами, кроме Internet Explorer. Еще один доступный формат — APNG. Однако его поддерживает только два браузера — Opera и Firefox.

Требования Google и Яндекса запрещают анимацию при создании фавикона.

Как сделать фавикон: обзор 4 сервисов

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

Realfavicongenerator

Real Favicon Generator — генератор, который позволяет бесплатно создать фавикон для сайта на базе загруженной картинки.

Преимущества сервиса:

Поддерживает работу со всеми операционными системами (Windows, Mac, iOS, Android, Surface) и на всех устройствах.
Совместим со всеми браузерами: Chrome, Firefox, Opera, Safari, Camino, Coast, IE и т. д.

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

Далее сервис позволяет отдельно настроить фавикон для отображения на экранах пользователей iPhone и iPad:

Настройки иконки для пользователей Android, которые осуществляют поиск через Chrome:

Также опциональные настройки фавикона доступны для пользователей Windows 8 и 10, и macOS Safari.

После настроек всех опций можно создавать код фавиконки:

Сгенерированный код готов для установки на сайт в файл с кодом мини-логотипа.

PR–CY

PR–CY — сервис для проверки скорости, трафика и технических параметров сайтов с возможностью создания фавиконов.

Преимущества:

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

Изображение можно загрузить с компьютера или указав ссылку на него. После загрузки картинки остается только кликнуть на кнопку «Создать Favicon».

Затем нужно скачать zip-файл с готовым фавиконом на компьютер.

В папке содержатся:

Иконки для пользователей Android с браузером Chrome размером 192х192 и 512х512 pcs.
Иконки для пользователей Apple.
Фавиконы размером 16х16 и 32х32.
Файл с автоматически сгенерированным кодом.

Пример сгенерированного веб-сервисом кода:

Недостаток: инструмент можно бесплатно использовать 10 раз. Дальше доступно только платное использование.

Perfecto Web

Perfecto Web — бесплатный онлайн-сервис для быстрого создания фавиконов.

Возможности:

Сервис создает фавиконы во всех популярных размерах: 16х16, 32х32, 48х48, 64х64, 128х128 pcs.
Создает изображения в формате JPG, GIF, PNG.
Простой русскоязычный интерфейс.

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

После этого достаточно скачать созданный фавикон в выбранном размере:

А также скопировать сгенерированный код и интегрировать его на сайт.

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

Favic-o-Matic

Favic-o-Matic — сервис для генерации фавиконов, который создает мини-логотип на базе загруженного изображения размером от 114х114 pcs в форматах ICO и PNG.

Возможности:

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

При работе с сервисом можно указать желаемый размер фавикона:

Расширенные настройки включают такие опции:

После настроек нужно загрузить изображение размером от 114х114 pcs:

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

Недостатки: нет индивидуальных настроек фавикона для отображения на разных устройствах и в разных браузерах.

Как установить фавикон на сайт

С помощью одного из перечисленных сервисов вы создали фавикон и сгенерировали код. Остается только поместить код на сайт, чтобы созданные фавиконы отобразились в поиске Google и Яндекса.

Установка кода на сайт

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

Загрузить фавикон в корневую директорию сайта. Он должен быть доступен по адресу https://yoursite.com/favicon.ico. Для загрузки фавикона можно использовать файловый менеджер. Например, Filezilla.
Вставить код на сайт. Для этого его нужно скопировать и вставить в HTML-код внутри тегов <head>…</head>.

Пример кода фавикона:

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

Проверка отображения фавикона и его редактирование

После загрузки роботом фавикона он отобразится на поиске в течение двух недель.

Проверить отображение фавикона в разных поисковых системах можно так:

Для Google. В ссылку https://www.google.com/s2/favicons?domain=mysite.ru вместо «mysite.ru» нужно подставить адрес своего сайта.
Для Яндекса. В строку браузера надо ввести https://www.favicon.yandex.net/favicon/URL. Вместо URL вставить адрес своего сайта.

Еще один способ проверить фавикон — воспользоваться сервисом Realfavicongenerator. Здесь также все максимально просто — ссылку на сайт нужно добавить в строку и нажать на проверку.

Если фавикон отображается некорректно, нужно проверить такие моменты:

Формат графического изображения. Изображение в формате ICO, PNG или GIF должно находиться в корне ресурса.
Правильность кода. Возможные значения в коде фавикона для робота Яндекса можно посмотреть в справке, требования Google — здесь.
Отображение иконки. Изображение мини-логотипа должно быть уникальным, четким и понятным пользователям.
Доступность файла с фавиконом для сканирования поисковых роботов. Для ускорения процесса индексации фавикона нужно запросить повторное сканирование страниц. Вот справка Google, как это сделать, а вот инструкция от Яндекса.

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

Чек-лист по созданию фавикона

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