Favicon — иконка сайта

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

Почему это не мелочь

В мобильной выдаче Google иконка стоит прямо у названия сайта. Результат с аккуратным логотипом выглядит как сайт компании; результат с серым глобусом по умолчанию — как сайт-однодневка. Разница в кликах есть, и она не в пользу глобуса.

Плюс банальное удобство: человек с двадцатью вкладками находит вашу по иконке, а не по обрезанному заголовку.

Минимальный современный набор

Раньше подключали десяток файлов под разные устройства. Сегодня достаточно трёх:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

• SVG — векторная иконка, одинаково резкая на любом экране. Может менять цвет в тёмной теме через медиазапрос внутри файла.
• PNG 32×32 — запасной вариант для браузеров, не умеющих SVG в иконках.
• apple-touch-icon 180×180 — для ярлыка на домашнем экране iOS. Без прозрачности: iOS зальёт её чёрным.

Файл favicon.ico в корне сайта браузеры запрашивают автоматически, даже если он нигде не подключён. Положить его туда стоит — иначе в логах будет поток 404.

Требования к изображению

Простая форма. Иконка живёт в размере 16×16 пикселей: логотип с тонкими линиями и мелким текстом там превращается в кашу. Обычно берут одну букву, знак или самый узнаваемый элемент фирменного стиля.

Контраст с фоном вкладки. Тёмная иконка исчезает в тёмной теме браузера, светлая — в светлой. Векторный формат позволяет решить это одним файлом.

Квадрат с небольшими полями — иконку могут скруглить или вписать в плитку.

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

• Пункт аудита «Favicon».
• Откройте https://ваш-сайт.ру/favicon.ico и /favicon.svg — оба должны отдавать изображение, а не 404.
• Посмотрите на вкладку в браузере. Если иконка не сменилась после обновления — почистите кэш: браузеры кэшируют favicon особенно упорно.

Когда поисковик покажет иконку

Не сразу. Google берёт её при очередном обходе главной страницы и требует, чтобы файл был доступен роботу — то есть не закрыт в robots.txt. Иконка должна лежать на том же домене и быть квадратной; несоблюдение любого условия означает серый глобус в выдаче.