Guide · pwa
What is a maskable icon?
October 23, 2026 · 9 min read
A maskable icon is a PWA icon drawn so Android (and similar launchers) can apply a circle, squircle, or rounded rectangle without cutting off the logo. It is not a different file format. It is a composition rule plus a purpose flag in the web app manifest.
Why any icons clip on Android
A full-bleed logo looks fine as a square preview. On a Pixel or Samsung launcher, the system masks that square into a circle or squircle. Corners disappear; thin marks clipped to the edge look broken.
Maskable assets keep important artwork inside a safe inner region and fill the outer margin with padding or background color the mask can cover.
The safe zone (about 80%)
W3C guidance: keep critical content inside a circle covering the central 80% of the image (radius 40% of the shorter side). Generators draw this zone as an overlay so you can check before export.
This is not the same as Android adaptive icon's roughly 66% zone. Maskable is for web manifests; adaptive icons are a native Android layer system. Related idea, different pipelines. See the adaptive icons guide if you ship a Play Store APK.
Declaring purpose in the manifest
Use "purpose": "maskable" on files that obey the safe zone. You can use "any maskable" on a single asset only if padding works for both uses. When unsure, export two sets: tight any icons for UI chrome, padded maskable for the launcher.
Design tips at small sizes
Avoid tiny wordmarks inside the safe zone; at 192px the type collapses. Prefer a strong monogram or symbol. Match background_color in the manifest to the pad color so install transitions do not flash white.
Preview at least one circle and one squircle. If either clips the mark, increase padding and regenerate. Do not stretch the logo to "fix" it.