Генератор maskable-иконки для PWA

Загрузите логотип, выберите фон и создайте maskable-иконку, соответствующую стандарту Progressive Web Apps: логотип остаётся хорошо виден, даже когда система обрезает иконку по кругу, по скруглённому квадрату или по любой другой форме.

Перетащите логотип сюда или нажмите, чтобы выбрать файл (лучше с прозрачным фоном, до 15 МБ).

Как это работает

Maskable-иконка должна полностью заполнять квадрат, включая края (в отличие от обычной иконки с прозрачными полями), потому что операционная система затем накладывает поверх собственную форму обрезки (круг, скруглённый квадрат, капля и т. д.). Пунктирный круг в предпросмотре показывает стандартную безопасную зону (примерно 80% диаметра): любой логотип внутри неё остаётся видимым при любой форме обрезки на устройстве пользователя.

Нужно ли также добавлять обычную (не maskable) иконку?

Да, рекомендуется объявить оба типа иконок в файле manifest вашего PWA (одну запись с "purpose": "any" и одну с "purpose": "maskable"), так как некоторые системы не применяют обрезку и показывают иконку «any» как есть.

Зачем создавать сразу 192x192 и 512x512?

Размер 192x192 — минимально рекомендуемый для иконки на главном экране большинства устройств Android, а 512x512 используется для заставки (splash screen) и там, где нужно более высокое разрешение, например в магазинах приложений.

100% локальная обработка: иконка создаётся полностью в вашем браузере, ваш логотип никогда не отправляется на сервер.