Иконка PWA не обновляется: манифест, адреса файлов и кеш

Если иконка PWA не обновляется, сначала проверьте манифест и адреса изображений, которые получает браузер. Замена favicon вкладки не обязательно меняет значок установленного приложения. Эти ресурсы могут иметь разные объявления и кеши.

Генератор favicon и PWA готовит изображения и начальный манифест. При публикации на сайте нужно согласовать его пути с фактическим расположением файлов.

Разделите иконку вкладки и установленного приложения

Объявление favicon в HTML обслуживает вкладку браузера. Записи манифеста описывают изображения веб-приложения. Поэтому страница может показывать новый favicon, а установленный ярлык — прежний рисунок.

Запишите, где наблюдается проблема: вкладка, приглашение к установке, лаунчер или уже установленная программа. Укажите браузер и операционную систему. Это делает проверку повторяемой и предотвращает исправление не того ресурса.

Откройте манифест, на который ссылается страница

Найдите ссылку манифеста и откройте её непосредственно. Ответ должен содержать нужный JSON, а не страницу входа, цикл перенаправлений или общий HTML сайта. Проверяйте опубликованный ответ вместе с файлом редактора.

Текущая выдача содержит Web/site.webmanifest, android-chrome-192x192.png и android-chrome-512x512.png. Начальный манифест использует пути изображений от корня. Если файлы находятся в другой папке, измените ссылки, иначе они останутся направлены на отсутствующие ресурсы.

Для приложения в подкаталоге это особенно важно. Адрес, начинающийся с /, возвращается к корню источника, а не начинается в папке текущей страницы.

Например, запись images/icon.png в манифесте /assets/site.webmanifest разрешается как /assets/images/icon.png. Запись /images/icon.png указывает на папку от корня сайта. Это пример адресов, не требование использовать именно такие имена. Выберите один способ размещения, проверьте полученный адрес в браузере и лишь затем меняйте ссылки в манифесте. Исправление пути помогает только тогда, когда файл действительно опубликован по выбранному адресу.

Проверьте каждый адрес изображения

Справочник MDN по иконкам манифеста объясняет src, sizes, type и purpose. Относительные пути разрешаются от URL манифеста; начинающиеся с / — от корня источника.

Откройте каждую картинку и исследуйте ответ. Страница ошибки не становится изображением из-за окончания .png. Локальный файл может отсутствовать в публикации или блокироваться политикой изображений страницы.

Сравните объявленные размеры с настоящими пикселями. Если файл изменился после экспорта, обновите и запись манифеста. Имя не доказывает, что картинка имеет 192 или 512 пикселей.

Указывайте только подготовленные назначения

Текущий экспорт создаёт обычные иконки. Он не готовит отдельное проверенное изображение maskable. Добавление purpose: "maskable" не изменяет композицию и безопасную область исходника.

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

Манифест и иконки, проверенные в браузере

1 октября 2026 года Chrome 154 открыл оригинальный локальный тестовый сайт с экспортированным манифестом и иконками. Манифест ответил 200 с application/manifest+json; относительные start_url и scope разрешились в корень тестового сайта. Оба изображения ответили 200, декодирование подтвердило 192 × 192 и 512 × 512 пикселей. Favicon и Apple touch icon проверены отдельно.

Скачать исходный тестовый сайт иконок PWA

Выполните команду из извлечённого каталога и откройте http://localhost:8892/. При переносе файлов в подкаталог измените URL иконок, начинающиеся от корня.

python3 -m http.server 8892 --bind localhost

Изучите браузер перед удалением данных

Откройте инструменты приложения или манифеста. Посмотрите разобранный JSON, предварительные изображения и ошибки загрузки. Затем проверьте сетевые ответы манифеста и PNG. Так можно отличить неправильную ссылку от старой кешированной копии.

Для временного теста удалите установленную тестовую PWA и поставьте её снова после проверки новых ресурсов. Очистка данных сайта дополнительно может удалить локальную информацию приложения. Начинайте с точечных проверок, особенно при работе с настоящими пользовательскими данными.

Осознанно версионированный URL изображения облегчает связь между публикацией и кешем. Обновите ссылку и запишите установленную версию. Не генерируйте случайные адреса на каждый запрос: стабильные версии легче исследовать и кешировать.

Отдельно проверьте установку

Руководство MDN по установке PWA описывает дополнительные условия. Правильные иконки — часть процесса, но их экспорт не делает сайт устанавливаемым во всех браузерах и системах.

Используйте контролируемую тестовую страницу и целевой браузер. Запишите загрузку манифеста, получение изображений и рисунок после установки. Проверку на компьютере нельзя описывать как установку на телефон.

Реальная установка через Safari

2 октября 2026 года тот же тестовый сайт добавили на домашний экран из Safari в изолированном симуляторе iPhone 17 с iOS 26.5. Режим открытия как веб-приложения был включён. My App показал исходную иконку XY, а нажатие открыло сайт в отдельном приложении Web без адресной строки Safari. Проверен этот локальный сценарий, но не установка в Chromium, работа офлайн или физическое устройство.

По инструкции Apple для Safari откройте сайт и выберите Ещё → Поделиться → На экран «Домой». Оставьте открытие как веб-приложения включённым и нажмите Добавить. Затем откройте новую иконку и проверьте изображение и адрес. В тестовом сайте по-прежнему нет service worker или отдельного maskable-изображения.

Вопросы об иконках манифеста PWA

Почему favicon изменился, а установленная иконка нет?

Проверьте отдельные объявления и кеш существующей установки. Favicon может быть верным, пока манифест всё ещё выбирает другой файл.

Достаточно переименовать изображение?

Имена можно согласовать, но нужно проверить формат и размеры. Переименование не преобразует и не масштабирует байты.

Все браузеры должны показывать одинаковый результат?

Нет. Интерфейсы установки и назначения иконок различаются. Проверяйте нужный браузер и устройство.

Завершите проверку PWA воспроизводимым результатом

Подтвердите манифест, перейдите по его ссылкам и проверьте файлы перед новой тестовой установкой. Заменяющие ресурсы можно подготовить в генераторе PWA.