Что такое maskable-иконка
Когда человек устанавливает веб-приложение, лаунчер показывает его иконку в своей форме: на одном телефоне это круг, на другом — скругленный квадрат или капля. Как обычная иконка с прозрачным фоном впишется в эту форму, решает платформа. Maskable-иконка сделана как раз под обрезку: она заполняет весь квадрат собственным фоном, поэтому какую бы форму ни вырезал лаунчер, получается цельная цветная иконка.
В манифесте веб-приложения эту разницу задает поле purpose у каждой иконки. Спецификация W3C перечисляет три значения — any, maskable и monochrome, а иконка без purpose считается any.
Безопасная зона: круг радиусом 40 %
Спецификация определяет, где графике не страшна никакая маска: это «круг с центром в центре иконки и радиусом 2/5 (40 %) от размера иконки». На иконке 512 px это круг диаметром 410 px по центру. MDN описывает ту же зону как круг диаметром 80 % от иконки, а web.dev предупреждает, что внешний край — примерно по 10 % с каждой стороны — может быть обрезан.
На картинке — maskable-иконка из примера пакета ниже. На первой копии нарисована безопасная зона, а остальные три — тот же файл под круглой маской, маской-скругленным квадратом и маской-каплей. Знак остается внутри круга, поэтому любая маска оставляет его целым — меняется только форма фона.
Генератор favicon вписывает в круг саму графику, а не ее ограничивающий прямоугольник, за вычетом выбранного отступа. Поэтому круглый знак может занять почти всю безопасную зону, а квадратное фото получится мельче — ведь в круг должны поместиться и его углы.
Purpose any или maskable: зачем два файла
Иконка может объявить "purpose": "any maskable", и статья web.dev о манифесте использует именно такую форму. Но статья web.dev о maskable-иконках советует так не делать: иконка с отступом под маску выглядит слишком мелкой там, где ее показывают без маски. Источники расходятся, а два файла снимают этот компромисс. Иконка any сохраняет прозрачность, и графика заполняет квадрат; у иконки maskable фон до самого края, а графика — внутри безопасной зоны.
| Purpose | Фон | Графика | Где показывается |
|---|---|---|---|
any |
Прозрачный | Заполняет квадрат за вычетом отступа | Везде, где иконку показывают без обрезки |
maskable |
Ваш цвет фона от края до края | Внутри круга 40 % | В лаунчерах, которые обрезают иконки под форму |
Манифест с иконками обоих видов
Это site.webmanifest из примера пакета. Пути к иконкам относительные: спецификация отсчитывает src, как и start_url, от адреса самого манифеста, поэтому иконки работают из любой папки, если лежат рядом с манифестом.
{
"name": "png2svg.art",
"short_name": "png2svg",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
Подключите его на каждой странице тегом <link rel="manifest" href="/site.webmanifest">. Спецификация называет .webmanifest зарегистрированным расширением файла и рекомендует отдавать его с типом application/manifest+json, хотя подойдет любой JSON-тип.
Размеры выбраны не случайно. Руководство MDN по установке PWA, обновленное в сентябре 2026 года, говорит, что браузеры на Chromium, помимо прочих условий, устанавливают веб-приложение, только если в манифесте есть name или short_name, start_url, режим display и иконки 192 и 512 px, а сайт работает по HTTPS. Safari устроен иначе: команда WebKit написала для Safari 26, что требований к установке нет, а иконки из манифеста используются, если сайт их задал. MDN также советует начинать с графики не меньше 1024 px по стороне: маленький растр, растянутый до 512 px, деталей не наберет.
Как проверить maskable-иконку
В Chrome откройте DevTools, перейдите в Application → Manifest и отметьте Show only the minimum safe area for maskable icons. Тогда в разделе иконок каждая maskable-иконка будет обрезана по безопасной зоне: если там пропало что-то важное, лаунчер тоже может это обрезать. Эта опция описана в документации Chrome. web.dev также советует Maskable.app — сторонний сайт, где можно посмотреть иконку под разными масками. Последняя проверка — установленное приложение на настоящем телефоне.
Настоящий пример для скачивания
Иконки выше получены за один запуск генератора favicon на собственном знаке этого сайта (SVG из нашего репозитория, а не чья-то загрузка) с отступом 8 % и фоном #e8efff. Это ровно те файлы, которые делает инструмент. Скачайте пример пакета (ZIP), чтобы посмотреть все файлы вместе с README. Про сторону вкладки браузера в этом же пакете читайте в руководстве SVG, PNG или ICO для favicon.