Favicon не обновляется? Сначала разберитесь с кэшем
Favicon, который не обновляется, — это почти всегда кэш, а не баг. Сначала убедитесь, что файл действительно изменился, затем сбрасывайте кэш, двигаясь от файла наружу.
Проверьте файл, прежде чем трогать браузер
Favicon кэшируются агрессивно на каждом уровне: браузер, ваш CDN и иногда устаревший артефакт сборки. Прежде чем винить браузер, выясните, какой уровень отдаёт старое изображение.
Идите прямо к файлу. Откройте https://ваш-сайт.com/favicon.ico в адресной строке и посмотрите, что загрузится. Если это старая иконка, проблема не в вашем браузере — сервер или CDN всё ещё отдаёт предыдущий файл. Если это новая иконка, файл опубликован нормально, и отстаёт только кэш вашего браузера.
Работайте от файла наружу
- 1
Откройте URL иконки напрямую
Загрузите /favicon.ico и каждый путь PNG в адресной строке. Старое изображение по URL означает кэш сервера, сборки или CDN. Новое изображение по URL означает, что устарел только ваш браузер — переходите к шагам для браузера.
- 2
Добавьте параметр версии в тег
Строка запроса заставляет URL выглядеть новым, поэтому кэши загружают свежую копию. Увеличивайте число каждый раз, когда иконка меняется. Это самое надёжное исправление кэша браузера, которое существует.
- 3
Сделайте принудительное обновление страницы в приватном окне
Приватное или инкогнито-окно игнорирует обычный кэш favicon. Сочетайте его с принудительным обновлением страницы, чтобы тестировать опубликованный файл, а не локальную копию.
- 4
Очистите CDN и устаревшую сборку
Если старое изображение всё ещё по URL, очистите пути иконок на вашем CDN или граничном кэше, затем убедитесь, что ваша сборка действительно скопировала новые файлы. Закэшированный артефакт сборки будет продолжать отдавать старую иконку, пока вы не очистите его и не пересоберёте.
Параметр версии
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">Увеличивайте ?v= каждый раз, когда иконка меняется. Тот же путь к файлу, новый URL, поэтому кэши браузера и CDN воспринимают его как свежий ресурс.
Частые вопросы
Почему мой favicon не обновляется после того, как я его изменил?
Кэш отдаёт старый файл. Откройте /favicon.ico напрямую: старое изображение там указывает на кэш CDN или сборки, новое изображение там указывает на кэш вашего браузера. Исправьте тот уровень, который действительно устарел.
Как заставить браузер перезагрузить favicon?
Добавьте строку запроса версии вроде /favicon.ico?v=2 в тег <link> и увеличивайте её при каждом изменении, затем сделайте принудительное обновление страницы в приватном окне. Это самый надёжный способ заставить браузер загрузить свежую копию.
Сколько времени пройдёт, пока favicon обновится сам?
Это зависит от времени жизни вашего кэша. Без параметра версии это может занять часы или больше, поскольку браузеры и CDN держат иконки долго. Параметр версии заставляет изменение вступить в силу при следующей загрузке.
Мой favicon обновился везде, кроме домашнего экрана iOS. Почему?
Сохранённые ярлыки iOS замораживают иконку на момент их добавления. Удалите ярлык и добавьте страницу заново, чтобы подхватить новый apple-touch-icon.