Почему favicon не показывается?

Разбор случаев, когда значок не появляется или отображается неверно. Частые причины и что проверить в разных браузерах и на разных платформах.

Почему значок часто не виден

Если favicon не появляется, причины обычно одни и те же. Поняв их, проблему проще найти и закрыть. Вот самые частые:

Неверный путь к файлу: Чаще всего в HTML-теге link указан неправильный путь
Кэш браузера: Браузеры агрессивно кэшируют favicon, поэтому после правки он может ещё какое-то время не обновляться
Нет HTML-тегов link: Без корректных link в секции head значок не отобразится
Неподходящий формат или размер: Неподдерживаемый формат или неверные размеры мешают показу
Настройки сервера: Неверный MIME-тип или правила сервера могут блокировать запросы к файлу
Смешение HTTPS и HTTP: Смешанный контент мешает загрузке значка

Как исправить, если favicon не виден

1. Проверьте HTML-теги link

Сначала убедитесь, что в head документа стоят правильные теги link. Без них или с ошибками в них значок не появится.

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

Пути в href должны совпадать с реальным расположением файлов. Если значка нет, сверьте пути относительно корня сайта.

2. Очистите кэш браузера

Favicon кэшируется очень настойчиво, поэтому после правки кода он может ещё не обновиться. Если подозреваете кэш:

Сделайте жёсткое обновление (Ctrl+Shift+R в Windows/Linux, Cmd+Shift+R на Mac)
Очистите кэш и cookie для этого сайта
Откройте сайт в окне инкогнито / приватном режиме
Подождите 24–48 часов, пока кэш истечёт сам

Если после этого значок всё ещё не виден, дело скорее не в кэше.

3. Проверьте пути и расположение файлов

Убедитесь, что файлы лежат там, где вы ожидаете. Если их нет или каталог другой, значок не загрузится.

Типичные места для файлов favicon:

Корневой каталог: /favicon.ico or /favicon.png
Папка public: /public/favicon.ico (для генераторов статических сайтов)
Папка assets: /assets/favicon.ico

Если значок не появляется, пути в HTML должны совпадать с фактическим расположением на сервере.

4. Проверьте формат и размер

Значок может не показаться из-за неподдерживаемого формата или неверного размера. Что сделать:

Формат ICO: Классический вариант, работает во всех браузерах (16x16 или 32x32 пикселей)
Формат PNG: Современные браузеры понимают PNG (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
Формат SVG: Поддерживают современные браузеры; масштабируется без потери чёткости

Файлы должны быть корректно собраны и иметь нужный размер. Если ничего не видно, начните со стандартного ICO или PNG.

5. Проверьте конфигурацию сервера

Ошибки сервера тоже прячут значок. Что проверить:

MIME-типы для файлов .ico, .png и .svg заданы верно
Сервер отдаёт запросы к файлам favicon
Нет редиректов, которые блокируют эти запросы
HTTPS и HTTP согласованы (нет предупреждений о смешанном контенте)

Если проблема на стороне сервера, напишите хостеру или проверьте конфиги.

6. Проверьте разные браузеры

Иногда значок есть в одном браузере и отсутствует в другом. Что сделать:

Проверьте Chrome, Firefox, Safari и Edge
Проверьте мобильные браузеры (iOS Safari, Chrome Mobile)
Убедитесь, что значок есть в закладках и в истории
Посмотрите и десктоп, и мобильную вёрстку

Если проблема только в отдельных браузерах, сверьте их требования и известные ограничения.

Короткий чеклист

Пройдитесь по списку, чтобы быстро понять, почему значок не виден:

В секции head есть теги link
Пути в HTML совпадают с реальным расположением файлов
Файлы существуют и доступны
Формат поддерживается (ICO, PNG или SVG)
Кэш очищен или проверка идёт в режиме инкогнито
В консоли нет ошибок загрузки favicon
MIME-типы на сервере заданы верно

Генератор, если форматы путают

Если значок не виден и неясно, какие форматы и размеры нужны, генератор часто закрывает вопрос. logo87.com собирает все стандартные размеры и форматы, чтобы значок стабильно показывался в браузерах и на устройствах.

Хороший генератор отдаёт:

Стандартные размеры (16x16, 32x32, 48x48, 96x96, 192x192, 512x512)
Несколько форматов (ICO, PNG, SVG)
Apple touch icon для устройств iOS
Готовые HTML-теги link, которые можно скопировать

Так вы обходите типичные причины: неверный формат, неверный размер или отсутствующие файлы.

Заключение

Если favicon не виден, чаще всего виноваты путь к файлу, кэш, отсутствующие HTML-теги или формат. Шаги выше обычно быстро показывают, что чинить.

Браузеры кэшируют значок агрессивно: даже после правки он может появиться не сразу. Очистите кэш или проверьте в окне инкогнито. Если и тогда пусто — смотрите конфиг сервера или спросите хостера.

Генератор собирает нужные файлы и форматы и сильно снижает шанс, что значок пропадёт. Часто это самый простой способ закрыть проблему и получить рабочий favicon во всех браузерах и на всех устройствах.