Иконки PWA: что нужно устанавливаемому приложению
Чтобы браузер счёл ваш сайт устанавливаемым PWA, его манифест должен перечислять как минимум PNG-иконки 192x192 и 512x512. Настоятельно рекомендуется маскируемая иконка, чтобы Android мог придать ей форму лаунчера, а iOS всё равно нужен отдельный apple-touch-icon, потому что для иконок домашнего экрана она игнорирует манифест. Пропустите пару 192/512 — и запрос на установку не появится.
Порог установки
Chrome и другие браузеры на Chromium не предложат установить PWA, пока манифест не перечислит и иконку 192x192, и 512x512. Эта пара — жёсткое требование: без неё нет запроса на установку, что бы ещё ни содержал манифест.
192 также служит ярлыку на домашнем экране, а 512 питает экран загрузки и дисплеи высокой плотности. Маскируемая версия позволяет Android обрезать иконку под любую форму лаунчера вместо обрамления её в белый прямоугольник.
Иконки, которые нужны PWA
| Иконка | Зачем нужна |
|---|---|
| PNG 192x192 | Требование установки и ярлык на домашнем экране |
| PNG 512x512 | Экран загрузки и дисплеи высокой плотности |
| Маскируемая иконка | Позволяет Android придать иконке форму лаунчера |
| apple-touch-icon 180x180 | Домашний экран iOS: манифест его не покрывает |
Частые вопросы об иконках PWA
Какие размеры иконок нужны PWA?
Как минимум PNG 192x192 и 512x512 в манифесте, желательно с маскируемым вариантом, плюс apple-touch-icon 180x180 для домашних экранов iOS.
Почему мой PWA не устанавливается?
Самая частая причина — манифест без иконки 192x192 или 512x512: обе требуются, прежде чем браузер покажет запрос на установку. Сначала проверьте массив icons в манифесте.
Покрывают ли иконки PWA домашние экраны iOS?
Нет. iOS игнорирует иконки манифеста для домашнего экрана и использует вместо них apple-touch-icon, так что этот файл тоже нужен.