Maskable-иконки и безопасная зона
Android обрезает иконку вашего приложения под любую форму, которую использует лаунчер. Maskable-иконка — это иконка, спроектированная так, чтобы пережить эту обрезку: фон с полным вылетом, изображение удержано внутри безопасной зоны.
Почему обычная иконка обрезается
Разные лаунчеры Android используют разные формы иконок. Чтобы держать их согласованными, Android берёт вашу иконку и обрезает её под любую форму, которую использует устройство. Стандартная иконка с логотипом у края теряет свои углы, а иконка с прозрачным фоном получает уродливую линию обрезки.
Maskable-иконка создана для этой обрезки. Она заполняет весь холст фоном, чтобы не было прозрачности, и держит всё важное подальше от краёв, которые могут быть срезаны.
Безопасная зона
Правило простое: держите критичное изображение внутри внутреннего круга, примерно центральные 80 процентов холста. На иконке 512x512 это центрированный круг диаметром около 410 пикселей. Всё, что за его пределами, — под угрозой обрезки.
Внешнее кольцо — это вылет. Оно должно быть только фоном, без логотипа, без текста, без каких-либо краёв, которые вам было бы жаль потерять. Поскольку вы не знаете, какую форму использует то или иное устройство, проектируйте так, чтобы иконка читалась корректно, будь она кругом, сквирклом или скруглённым квадратом.
Объявите её в манифесте
{
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Поле purpose сообщает Android, к какой иконке применять маску. Публикуйте maskable рядом с вашей стандартной иконкой any, чтобы покрыть оба случая. Вы также можете задать "purpose": "any maskable" на одной иконке, если она хорошо работает обрезанной и необрезанной.
Частые вопросы
Что такое maskable-иконка?
Иконка приложения, спроектированная так, чтобы пережить обрезку Android под форму лаунчера. У неё фон с полным вылетом, и она держит важное изображение внутри центральной безопасной зоны, чтобы ни одна форма не срезала логотип.
Какого размера безопасная зона maskable?
Держите критичное содержимое внутри внутренних 80 процентов холста, центрированного круга. На иконке 512x512 этот круг около 410 пикселей в ширину. Считайте всё за его пределами обрезаемым вылетом.
Как пометить иконку как maskable?
Добавьте "purpose": "maskable" к записи иконки в массиве icons вашего манифеста. Публикуйте её рядом со стандартной иконкой purpose any или используйте "any maskable" на одной иконке, которая работает обрезанной и необрезанной.
Почему иконка на моём домашнем экране Android выглядит обрезанной?
Ваша иконка не maskable, поэтому Android обрезал дизайн, который для этого не создавался. Добавьте maskable-версию с фоном полного вылета и изображением с отступами и объявите её с purpose maskable.