Фавикон (favicon) — это маленькая картинка, которая отображается рядом с названием вашего сайта в сниппете результата поиска поисковых систем Google и Yandex, рядом с адресом сайта в адресной строке браузера, рядом с названием сайта в избранном, в закладках и истории посещений браузера.
Такие картинки называли FAVoritesICON — в переводе означает «значок для избранного». Отсюда и упрощённое наименование картинки — favicon.
Он привлекает внимание пользователей и помогае визуально запомнить сайт, найти ваш бренд и его сайт среди множества открытых вкладок в браузере. Чаще всего, картинка содержит логотип компании или первую букву наименования бренда.
Так же фавиконы нужны при установке сайта на главный экран мобильных устройств. Например, когда вы добавляете вкладку на рабочий экран для быстрого доступа.
Плюс ко всему, фавикон повышает узнаваемость сайта в поисковых системах.
Формат и размеры
С технической точки зрения, два параметра фавиконки, которые нужно обязательно учитывать, это формат и размер.
Форматы иконок:
- ICO (считается наиболее универсальным).
- PNG (универсальный вариант, особенно в формате 32 × 32, используется большинством современных браузеров и достаточно симпатично в них выглядит).
- SVG (самый современный формат, мало весит, масштабируется без потери качества, но поддерживается не во всех браузерах).
- GIF.
- JPEG.
- APNG (практически не поддерживаются в браузерах, устаревший формат).
- Animated gifs (практически не поддерживаются в браузерах, устаревший формат).
Подробнее про поддерживаемые разными браузерами форматы фавиконок можно почитать в статье в Википедии. Если кратко и по существу, то:
- Фавикон — растровое изображение, и измеряют его в пикселях.
- Вполне достаточно настроить иконку в формате ICO, так как этот формат поддерживается прямо с самых древних версий браузеров и считается универсальным. Из дополнительного можно настроить PNG и SVG.
- Рекомендуемый размеры: 16 × 16, 32 × 32, 48 × 48 или 64 × 64 пикселей.
- Для всех устройств Apple подойдет вариант формата PNG и размера 180 × 180 пикселей.
Совет
Если на сайте установлены системы аналитики, например, Яндекс.Метрика, GA4, то можно изучить отчеты по устройствам и браузерам и понять, что используют посетители сайта. Таким образом, можно понять, какие форматы иконок стоит обязательно настроить на сайте, а какие пропустить.
Рекомендации от поисковых систем Google, Yandex по настройке фавикон
Google:
- поддерживает следующие значения атрибута rel: icon, apple-touch-icon;
- значок сайта должен быть квадратным изображением (соотношение сторон 1:1) размером не меньше 8 x 8 пикселей. Рекомендуемый размер – от 48 x 48 пикселей.
- URL значка сайта может быть как относительным (/icon.ico), так и абсолютным (https://example.com/icon.ico);
Документация Google по настройке фавиконки.
Yandex:
- рекомендуемые размеры: 120 × 120, 32 × 32 или 16 × 16 пикселей.
- рекомендуемый формат: SVG. Анимация не поддерживается. Фавиконка размером 120 × 120 пикселей и в формате SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.
- Для отображения в результатах поиска и рекламных кампаниях робот может скачать фавиконку в том числе из тега apple-touch-icon.
Документация Яндекса по настройке фавиконки.
Совет
Если во время обхода сайт недоступен для робота Yandex, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки может отобразиться произвольная иконка. Поэтому важно, чтобы сайт работал корректно и был доступен.
Итоговый универсальный код для настройки фавиконки
Итого, после подробного изучения документации поисковых систем и общих рекомендаций, получаем следующий универсальный код для настройки фавиконки для сайта:
<link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png" sizes="180x180"> // для устройств Apple
<link rel="icon" href="/images/favicons/favicon-48x48.png" sizes="48x48" type="image/png"> // для Google, Yandex и мобильных устройств на Android
<link rel="icon" href="/images/favicons/favicon.svg" sizes="any" type="image/svg+xml"> // для Yandex
<link rel="shortcut icon" href=="/images/favicons/favicon.ico»> // универсальный формат для большинства устройств.Как сделать фавикон
Создать фавиконку с нуля можно несколькими способами:
- в графических редакторах (например, Photoshop, Figma);
- с помощью онлайн-генераторов (например, https://favicon.io/favicon-generator/ или https://realfavicongenerator.net/);
- с помощью AI (например, ChatGPT, Gemini, Leonardo).
При создании иконки учитывайте, что она должна быть простой и легко узнаваемой в маленьком размере.
Добавление Favicon на сайт
Алгоритм добавления и проверки правильной работы фавикон:
- Сохраните файлы favicon в корневой каталог вашего сайта;
- Откройте файл index.html (или другой главный файл вашего сайта) и добавьте созданный код в раздел <head>;
- После добавления favicon очистите кэш браузера и обновите страницу;
- Проверьте, отображается ли favicon во вкладке браузера, в закладках и в истории посещений. Проверить настройку можно так же через сервис https://realfavicongenerator.net/favicon-checker;
- Отправьте на переиндексацию главную страницу сайта или sitemap в Google, Yandex через Google Search Console, Яндекс.Вебмастер. Обновление в поисковых системах может занять от пары дней до нескольких недель.