Маскируемая иконка: безопасные зоны и поле purpose
Маскируемая иконка — это иконка PWA, нарисованная так, чтобы заполнять весь свой квадрат, чтобы платформа могла обрезать её под любую используемую форму (круг, «квадрокруг», скруглённый квадрат), не срезая ничего важного. Логотип держат внутри безопасной зоны — примерно внутренних 80 процентов, круга по центру с диаметром 80 процентов ширины иконки, — а фон выпускают до всех четырёх краёв. Объявляют её в веб-манифесте приложения через "purpose": "maskable".
Какую проблему это решает
Лаунчеры Android применяют маску формы к каждой иконке приложения, чтобы домашний экран выглядел единообразно, и форма меняется от устройства к устройству и от лаунчера к лаунчеру: на одном круг, на другом «квадрокруг», на третьем скруглённый квадрат. Обычная веб-иконка, отданная такой системе, сжимается в белый скруглённый прямоугольник или, хуже того, обрезается прямо по логотипу.
Маскируемая иконка нарисована под этот обрез. Графика простирается до каждого края, а значимое содержимое сидит глубоко внутри, так что любая из этих масок попадает на фон, а не на знак. Это та же идея, что и адаптивные иконки Android, выраженная одним изображением плюс объявлением.
Как её объявить
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]Отдавайте обе. Иконка с назначением по умолчанию используется там, где платформа не обрезает; маскируемая — там, где обрезает.
Безопасная зона по размеру иконки
| Размер иконки | Диаметр безопасной зоны (80%) | Чистый отступ на край |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
Частые вопросы о маскируемой иконке
Можно ли просто добавить отступы к существующей иконке?
Это большая часть работы, но отступы должны быть залитым фоном, а не прозрачностью. Прозрачное поле не даёт лаунчеру во что обрезать, и вы получаете мелкий логотип на простой белой плитке.
Как проверить, что безопасная зона верна?
Наложите круг по центру на 80 процентов ширины иконки и убедитесь, что ничего важного его не пересекает, затем установите PWA на устройство Android и посмотрите на лаунчер. DevTools в Chromium также показывают превью иконок манифеста в панели Application.
Использует ли iOS маскируемые иконки?
Нет. iOS берёт иконку домашнего экрана из ссылки apple-touch-icon и применяет свою фиксированную маску со скруглёнными углами, так что назначение maskable там не действует.