Favicon помогает узнать вкладку среди десятка других, увидеть закладку и иногда аккуратнее представить сайт в интерфейсах поиска. Это не фактор, который сам по себе поднимает страницы, зато отсутствие или битая иконка — заметная деталь доверия.
| Файл | Для чего |
|---|---|
| favicon.ico | Старые браузеры и простой fallback |
| favicon.svg | Чёткий масштабируемый знак |
| PNG 32×32/48×48 | Совместимые вкладки и ярлыки |
| apple-touch-icon.png | Добавление сайта на iOS |
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Как не потерять иконку при релизе
Сделайте знак различимым на 16×16: тонкий текст и мелкие детали исчезнут. Разместите файлы на HTTPS и проверьте, что сервер отдаёт корректный MIME-тип и 200, а не HTML-страницу 404 под видом изображения.
Браузеры агрессивно кэшируют favicon. При заметном обновлении используйте версионированный путь вроде /favicon-v2.svg и поменяйте ссылку в общем шаблоне. Откройте инкогнито и мобильный ярлык: обычная вкладка может продолжать показывать старый файл.
Проверить доступность поможет инструмент favicon; после обновления шаблона сделайте бесплатную проверку сайта.
Вопросы и ответы
Хватит ли одного favicon.ico?
Для базовой совместимости обычно хватит, но SVG и touch icon дают более предсказуемый результат на современных устройствах. Набор должен соответствовать реальному бренду, а не быть случайной буквой, которую нельзя распознать в маленьком размере.
Нужно ли добавлять favicon в sitemap?
Нет, sitemap перечисляет индексируемые страницы, а не служебные изображения. Важно, чтобы ссылка на иконку была в HTML-шаблоне и сам файл открывался без авторизации по постоянному HTTPS-адресу.
Почему новая иконка не видна сразу?
Вероятнее всего, браузер, CDN или ОС использует старый кэш. Измените имя файла либо добавьте версию в путь, очистите кэш для проверки и убедитесь, что новый HTML уже дошёл до публичного сервера.
Favicon влияет на SEO?
Не стоит обещать прямой рост позиций. Иконка улучшает узнаваемость и аккуратность интерфейса, но качество контента, доступность URL и техническая структура сайта остаются гораздо более важными факторами.