Favicon

Как работает

Минимум для работоспособности — файл favicon.ico в корне сайта. Браузер запрашивает его автоматически даже без указания в HTML:

GET https://example.com/favicon.ico

Для современного веба одного .ico недостаточно. Нужен набор форматов и размеров под разные устройства:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Стандартный размер для браузерной вкладки — 32×32, для ретины — 64×64. apple-touch-icon 180×180 используется, когда пользователь iOS добавляет сайт на главный экран. Файлы 192×192 и 512×512 указываются в manifest.json для Android и PWA. SVG-версия удобна для тёмной темы через media-query внутри самого SVG.

С сентября 2019 года Google показывает favicon в мобильной выдаче слева от сниппета. Требования к иконке: минимум 48×48, соотношение 1:1, не должна содержать оскорбительный контент, должна быть уникальной для домена.

Почему важно для SEO

В мобильной выдаче favicon — часть визуального представления сниппета. Пользователь на 6-дюймовом экране сначала видит иконку и заголовок, потом текст. Отсутствующая или мутная favicon выглядит как «сайт заброшен» — минус к CTR даже при высокой позиции.

Google Search Central в блоге объявил о показе favicon в 2019 году и подтвердил, что качество иконки учитывается при формировании сниппета. В десктопной выдаче favicon обычно не показывается, но остаётся важным элементом брендинга во вкладках браузера и закладках.

Яндекс отдельно показывает favicon в блоке «Ссылки на сайт» под сниппетом главной страницы. Для брендовых запросов правильная иконка укрепляет узнаваемость и повышает CTR.

Частые ошибки

• В корне сайта нет /favicon.ico — Google 404-ит стандартный запрос, но обычно всё равно находит иконку через <link> в <head>.
• Favicon в размере 16×16 растянут до 48×48 — в мобильной выдаче Google выглядит мыльно.
• Нет apple-touch-icon — при добавлении на iOS home screen отображается скриншот страницы вместо иконки.
• Прозрачный фон у иконки без учёта тёмной темы Chrome — иконка сливается с фоном вкладки.
• Favicon кэшируется браузером агрессивно (месяцы) — после смены иконки старая версия остаётся у пользователей долго.
• Указано несколько <link rel="icon"> с одинаковым размером — часть браузеров берёт первую, часть последнюю.

Как проверить

В Chrome DevTools вкладка Elements → поиск по rel="icon" покажет все указанные favicon в <head>. В Network смотрите запрос к /favicon.ico и статус ответа. Онлайн-сервис RealFaviconGenerator (realfavicongenerator.net) валидирует полный набор иконок и генерирует правильный HTML-код. В Google Search Console раздел «Результаты поиска» показывает, распознал ли Google favicon для сайта.

SEO Crawler при обходе фиксирует наличие favicon по всем стандартным путям (favicon.ico в корне, <link rel="icon">, apple-touch-icon), проверяет размеры и доступность файлов. В отчёте это часть блока «Метатеги и иконки» — с указанием, каких форматов не хватает для полного покрытия устройств.

Вывод

Favicon — не косметика, а элемент мобильного сниппета с 2019 года. Собирайте полный набор (SVG + 32×32 + 180×180 + иконки для manifest), проверяйте через RealFaviconGenerator, следите за качеством картинки в размере 48×48 и выше — именно её Google покажет в поиске. Одна ссылка на favicon в корне сайта уже недостаточна для современного веба.