Favicon не работает или не отображается: причины и решение

Если favicon не показывается на сайте, в 90% случаев дело либо в кэше браузера, либо в неправильном пути к файлу иконки в коде страницы. Разберём оба варианта и остальные типичные причины по порядку.

Кэш браузера — самая частая причина

Браузеры агрессивно кэшируют favicon и могут не обновлять её неделями, даже если файл на сервере уже заменён. Проверьте так:

  • Откройте сайт в режиме инкогнито — если иконка появилась, дело именно в кэше
  • Очистите кэш браузера (Ctrl+Shift+Del) и перезагрузите страницу с Ctrl+F5
  • Добавьте к пути иконки параметр версии, например favicon.ico?v=2 — это заставит браузер загрузить файл заново

Проверьте код страницы

Favicon подключается тегом в <head>:

<link rel=»icon» type=»image/x-icon» href=»/favicon.ico»>

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

  • Путь указан неверно — файл лежит в другой папке, чем прописано в href
  • Тег продублирован в нескольких местах шаблона с разными путями, и побеждает не тот
  • Формат файла не совпадает с указанным type (например, PNG подан как image/x-icon)
  • Файл называется favicon.png, но по умолчанию браузер ищет favicon.ico в корне сайта

Что делать, если сайт на WordPress или другой CMS

В WordPress иконка сайта задаётся в разделе Внешний вид → Настроить → Свойства сайта, а не через шаблон напрямую. Если задать её и там, и вручную в коде темы, может возникнуть конфликт — используйте только один способ. После смены иконки через админку тоже помогает принудительная очистка кэша, включая кэш плагинов кэширования, если они установлены.

Технические требования к файлу

  • Оптимальный формат — ICO с несколькими размерами внутри (16×16, 32×32, 48×48) или PNG 32×32
  • Файл должен реально существовать по указанному пути — проверьте это, открыв путь к нему напрямую в браузере
  • Для мобильных устройств и вкладок Safari дополнительно используют теги apple-touch-icon и манифест для PWA

Если после проверки пути, формата файла и очистки кэша иконка всё равно не появляется, посмотрите консоль разработчика (F12 → Network) — там будет видно, какой именно запрос за favicon возвращает ошибку 404 или неверный тип содержимого.

Понравилась статья? Поделиться с друзьями: