Favicon не отображается или не обновляется? 9 причин и решений
Девять причин, ломающих favicon, и точное решение для каждой. В девяти случаях из десяти дело в кэшировании, поэтому начните с него и двигайтесь вниз по таблице.
<link rel="icon" href="/favicon.ico?v=2" sizes="any">Именно изменение URL заставляет браузер загрузить новый файл. Редактирования ICO на месте недостаточно.
Причины и решения
| Причина | Почему ломается | Решение |
|---|---|---|
| 1. Кэш браузера или CDN | Браузеры кэшируют favicon агрессивнее, чем почти любой другой ресурс, а CDN спереди добавляет второй слой. | Выполните принудительное обновление страницы (Cmd+Shift+R / Ctrl+F5) и добавьте строку запроса с версией, чтобы сам URL изменился. |
| 2. Неверный путь к файлу | Относительный путь разрешается относительно текущей страницы, а не корня. | Используйте начальный слеш, /favicon.ico, и убедитесь, что файл действительно загружается по этому URL в новой вкладке. |
| 3. Отсутствующие или неправильные теги link | Отсутствие ссылки на иконку, опечатка в rel="icon" или теги, размещённые вне <head>, — всё это мешает браузеру найти файл. | Проверьте разметку в вашем общем layout. |
| 4. Неверный формат или размер | Слишком маленький favicon, неверный MIME type или повреждённый .ico могут молча не отрисоваться. | Переэкспортируйте в поддерживаемом размере и формате и отдавайте с правильным content type. Сравните ICO и PNG и проверьте необходимые размеры favicon. |
| 5. Apple touch icon не обновляется | iOS игнорирует favicon.ico и использует apple-touch-icon. Если он отсутствует или устарел, домашний экран показывает не то. | Исправьте ссылку apple-touch-icon, затем удалите и заново добавьте страницу на домашний экран. |
| 6. Проблемы с иконкой манифеста | На Android и в установленных PWA иконка берётся из manifest.json. Плохой путь или неверный размер там ломают иконки домашнего экрана и заставки. | Исправьте пути и размеры иконок в manifest.json, затем переустановите приложение. |
| 7. Сборка удаляет ваши теги | Некоторые фреймворки переписывают head документа, поэтому написанные вручную теги link не переживают сборку. | Следуйте руководству для вашего стека: Next.js, React, WordPress или Shopify. |
| 8. Тема или CMS внедряет свою иконку | Тема может задать собственную иконку сайта, которая перекрывает добавленную вами в разметке. | Задайте иконку через настройку иконки сайта самой платформы, а не в шаблоне. |
| 9. Кэш сборки отдаёт устаревший файл | Кэш сборки или платформы продолжает выдавать старую иконку даже после того, как вы сделали редеплой. | Очистите кэш сборки/платформы, сделайте редеплой и проверьте снова. |
Где искать дальше
Подозреваете формат или размер? Сравните ICO и PNG в глоссарии и проверьте необходимые размеры favicon. Проблема с iOS? Прочитайте статью про apple-touch-icon. Проблема с манифестом? Прочитайте, что такое manifest.json.
Причины с 7 по 9 — специфичные для платформы: некоторые фреймворки и CMS перезаписывают или кэшируют favicon так, как чистый HTML этого не делает. Сборка может удалить ваши теги, тема может внедрить свою иконку, а кэш сборки может отдавать устаревший файл. Руководства по Next.js, React, WordPress и Shopify каждое покрывает свою версию этого.
Как очистить закэшированный favicon
- 1
Добавьте строку запроса с версией
Измените href ссылки на /favicon.ico?v=2, чтобы браузер загрузил новый файл.
- 2
Выполните принудительное обновление страницы
Используйте Cmd+Shift+R (macOS) или Ctrl+F5 (Windows), чтобы обойти кэш.
- 3
Очистите любой кэш CDN
Если перед вашим сайтом стоит CDN, инвалидируйте путь favicon, чтобы пограничные узлы отдавали новый файл.
Очистили кэш, а всё то же самое?
| Что вы видите | Что это обычно значит | Следующий шаг |
|---|---|---|
| 404: favicon не найден | Браузер запросил /favicon.ico, а на сервере там ничего не было. Часто встречается сразу после сборки фреймворка, которая так и не скопировала файл в вывод. | Откройте /favicon.ico напрямую. Если он выдаёт 404, файл не задеплоен. Это проблема сборки или пути, а не кэша, поэтому возня с кэшем никогда не поможет. |
| Старая иконка всё ещё загружается по прямому URL | Открытие /favicon.ico показывает СТАРОЕ изображение, то есть сам файл устарел. Никакое принудительное обновление его не сдвинет. | Этап сборки или CDN выдаёт старый файл. Очистите кэш платформы/CDN, сделайте редеплой, затем заново откройте прямой URL, прежде чем проверять вкладку. |
| Правильный файл по URL, неверная иконка во вкладке | Прямой URL корректен, но вкладка всё ещё неверна. Второй тег link (от темы, плагина или стандартный от фреймворка) перебивает ваш. | Посмотрите исходный код и сосчитайте теги rel="icon". Браузер берёт последний, который понимает, поэтому уберите проигравший, а не добавляйте третий. |
| Нормально в одном браузере, отсутствует в другом | Каждый браузер и каждый профиль Chrome хранит своё собственное хранилище favicon, и некоторые держат устаревшую запись днями. | Убедитесь в новом приватном окне или чистом профиле, прежде чем решить, что виноват сайт. |
Пройдите эту таблицу сверху вниз. Каждая строка исключает один слой, так что вы перестаёте гадать про кэш и начинаете читать, что сервер на самом деле возвращает.
Размеры, которые важны для проблемных случаев
Подтвердите решение сканированием
Гадать медленно. Запустите автоматическое сканирование, которое загружает ваш работающий сайт, перечисляет каждый найденный тег favicon и помечает отсутствующие или сломанные, чтобы вы знали, что решение действительно сработало.
Хотите протестировать вручную в разных браузерах и на устройствах? Смотрите, как тестировать и проверять свой favicon.
Часто задаваемые вопросы
Почему мой favicon не отображается?
Самые частые причины — агрессивное кэширование браузера, неверный или относительный путь к файлу и отсутствующие или неправильные теги <link> в <head>. Выполните принудительное обновление страницы, убедитесь, что /favicon.ico разрешается напрямую, и проверьте свои теги.
Как заставить favicon обновиться?
Добавьте строку запроса с версией к URL иконки, например /favicon.ico?v=2. Это заставляет браузер воспринимать её как новый файл. Затем выполните принудительное обновление страницы или очистите кэш сайта.
Почему мой favicon отображается на десктопе, но не на iPhone?
iOS использует apple-touch-icon, а не favicon.ico. Если ссылка на этот PNG 180×180 отсутствует, iOS откатывается к скриншоту. Добавьте ссылку apple-touch-icon и заново добавьте страницу на домашний экран.
Сколько времени нужно, чтобы favicon обновился в поиске Google?
Google обновляет favicon, когда повторно сканирует ваш сайт, а это может занять от нескольких дней до нескольких недель. Убедитесь, что иконка не меньше 48×48, на неё ссылается корректный тег rel=icon и она доступна для Googlebot.
Почему пишет, что favicon не найден, или возвращается 404?
Браузер запросил иконку по пути, а на сервере там ничего не было. Откройте /favicon.ico напрямую в новой вкладке: если выдаёт 404, файл никогда не был задеплоен по этому URL, обычно это сборка фреймворка, которая не скопировала его в вывод, или неверный путь в теге link. Исправляйте то, куда попадает файл, а не кэш.
Мой favicon отсутствует: где на самом деле должен быть файл?
Для классической иконки вкладки — реальный файл в корне сайта, чтобы /favicon.ico разрешался. Фреймворки меняют то, как он туда попадает: Next.js читает app/favicon.ico, Vite и большинство SPA копируют public/ в корень, а WordPress или Shopify отдают его через настройку иконки сайта, а не через файл. Если тег указывает туда, куда сборка никогда не записывала файл, иконка "отсутствует", даже если ваш источник выглядит правильно.
Я пробовал очистить кэш, а всё то же самое. Что теперь?
Перестаньте чистить кэши и читайте, что возвращает сервер. Откройте /favicon.ico напрямую: 404 означает проблему сборки или пути, старое изображение означает устаревший файл сборки или CDN, а правильный файл с неверной иконкой во вкладке означает, что побеждает второй тег link. Каждый исход указывает на своё решение. Смотрите таблицу эскалации выше.