Favicon.kz
Maskable icons (PWA/Android): what they are and how to create them | Favicon.kz

Maskable icons: stop Android from cropping your logo badly

Android launchers may crop icons into different shapes. A maskable icon helps your logo stay readable and centered.

What to do

  1. Create a 512×512 PNG with generous padding around the mark.
  2. Add an icon entry in manifest.json with purpose: "maskable" (or "any maskable").
  3. Test with different masks (circle, rounded square, etc.).
Best practice
Provide two icons: one with purpose "any" and another with purpose "maskable".

FAQ

Do I need maskable icons?
If you care about Android home screen/PWA appearance — yes.
Why does the icon look cropped?
Your logo is too close to the edges. Add more padding in the 512×512 source.