PWA maskable icons: the safe zone and the manifest entry
An installed web app gets its icon cropped by the launcher. What a maskable icon is, the 80 per cent safe zone, the manifest purpose field, and how to test it.
When someone installs your web app on Android, the launcher treats its icon like a native one and crops it to the phone's shape. A normal transparent logo either gets cut off or sits shrunk inside a white circle. A maskable icon is designed for the crop.
The safe zone
The icon fills the whole square with its background. The mark sits inside a centred circle whose diameter is 80 per cent of the icon's width. On a 512px icon that is a circle about 410px across, centred. Anything outside may be cropped on some launchers.
The manifest
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Keep any and maskable as separate files. The regular icon is shown uncropped in some places, where a maskable one would look small and padded.
Making a maskable icon from your app icon
- Start from your full-bleed square icon, the kind iOS uses.
- Scale the mark down so it fits the 80 per cent circle.
- Extend the background to the edges, with no transparency.
- Export at 512px, and at 192px if you want.
Testing
Chrome's dev tools show manifest icons in the Application panel, including how a maskable icon looks under a mask. Install the app on an Android phone as a final check. The rest of the web set is in favicon sizes, and Android's native equivalent is the adaptive icon.
App Icon Foundry exports a full-bleed maskable PWA icon with the safe circle respected, next to the regular web icon and the manifest lines, from the same design.
Questions
What is a maskable icon?
A PWA icon designed to be cropped. It fills the whole square, and its important content sits in a central safe zone, so the launcher can cut it into any shape without losing the mark.
How big is the maskable safe zone?
A centred circle with a radius of 40 per cent of the icon's width, so its diameter is 80 per cent of the icon. Anything outside it may be cropped.
Should my regular icon also be maskable?
Use separate files. Mark one icon with purpose any and another with purpose maskable. A maskable icon shown uncropped looks too small, and a regular icon cropped by a mask loses its edges.