Надёжный фавикон в HTML не сводится к одному волшебному тегу. Для него нужен небольшой набор доступных файлов и ссылок в head. Эта инструкция охватывает современные вкладки, старые клиенты и мобильные ярлыки без множества исторических вариантов.
Подготовьте файлы
Начните с квадратного символа, который остаётся читаемым даже в очень маленьком размере. Поместите favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest и PNG-файлы из манифеста в общедоступную папку, содержимое которой отдаётся из корня домена.
Путь /favicon.svg начинается от корня домена. Поэтому он остаётся правильным и на /products, и на /blog/article, в отличие от favicon.svg, который может разрешаться относительно текущей страницы.
Добавьте элементы в head
Объявите SVG первым: rel icon и type image/svg+xml, затем ICO: rel icon и sizes any. Добавьте rel apple-touch-icon для iOS и rel manifest для установки веб-приложения.
Тип должен соответствовать фактически отдаваемому файлу. Не переименовывайте PNG в .ico: содержимое и заголовок должны быть в формате ICO.
| Назначение | Связь | Файл |
|---|---|---|
| Современный браузер | icon | /favicon.svg |
| Совместимость | icon | /favicon.ico |
| Главный экран iOS | apple-touch-icon | /apple-touch-icon.png |
| Веб-приложение | manifest | /site.webmanifest |
Опубликуйте без ошибок в путях
После публикации откройте URL каждого файла напрямую. Ответ должен быть изображением или манифестом с успешным статусом, а не страницей входа или HTML-страницей ошибки 404, возвращённой с обманчивым статусом успеха.
Если сайт размещён в подкаталоге, скорректируйте пути или публичный базовый адрес. Проверьте итоговую страницу в инструментах разработчика: браузер должен запрашивать ожидаемые URL без перенаправления на другой хост.
Проверьте результат
Перезагрузите страницу с отключённым кэшем и изучите элементы link в итоговом DOM. Затем проверьте вкладку, закладку и, если нужно, добавление сайта на главный экран настоящего устройства.
Фавикон в поисковой выдаче дополнительно подчиняется правилам поисковика и его расписанию обхода. Поэтому наличие значка в браузере не гарантирует мгновенного обновления в результатах поиска.
Первоисточники
Частые вопросы
Элемент фавикона нужно размещать в body?
Нет. Элементы link, описывающие значки и манифест, должны находиться в head документа.
Достаточно favicon.ico в корне?
Это полезный запасной вариант, но он не описывает значок Apple Touch и значки устанавливаемого приложения из манифеста. Для этих задач объявите соответствующие форматы.
Зачем использовать путь, начинающийся с /?
Он отсчитывается от корня домена и не позволяет вложенной странице искать файл в своей собственной папке.