Favicon.kz
Maskable иконки (PWA/Android): что это и как сделать | Favicon.kz

Maskable иконки: чтобы Android не «съедал» ваш логотип

На Android лаунчеры могут обрезать иконку по своей форме (круг, скруглённый квадрат и т.д.). Maskable-иконка помогает сделать это аккуратно.

Что нужно сделать

  1. Сделайте 512×512 PNG с большими внутренними отступами вокруг логотипа.
  2. Добавьте в manifest.json запись с purpose: "maskable" (или "any maskable").
  3. Проверьте иконку на разных масках (круг/скругление).
Лучший вариант
Иметь две иконки: обычную (purpose: any) и maskable (purpose: maskable). Так поведение будет предсказуемее.

FAQ

Maskable нужен всем?
Если у вас есть PWA/ярлык на Android — да, это сильно улучшает внешний вид.
Почему иконка выглядит обрезанной?
Скорее всего, логотип стоит слишком близко к краям. Добавьте больше «воздуха» внутри 512×512.