What a maskable icon is
When someone installs a web app, the launcher shows its icon in the launcher's own shape: a circle on one phone, a rounded square or a teardrop on another. How an ordinary icon with a transparent background is fitted into that shape is up to the platform. A maskable icon is made for cropping: it fills the whole square with its own background, so whatever shape the launcher cuts out is a complete, colored icon.
The web app manifest marks the difference with the purpose member of each icon. The W3C specification lists three purposes, any, maskable and monochrome, and an icon without a purpose counts as any.
The safe zone: a circle of 40 % radius
The specification defines where artwork is safe from any mask: "a circle with center point in the center of the icon and with a radius of 2/5 (40%) of the icon size". On a 512 px icon that is a circle 410 px across, centred. MDN describes the same zone as a circle whose diameter is 80 % of the icon, and web.dev warns that the outer edge, about 10 % on each side, might be cropped.
The picture shows the maskable icon from the example package below. The first copy has the safe zone drawn on it; the other three are the same file under a circular, a rounded-square and a teardrop mask. Because the mark stays inside the circle, every mask leaves it whole, and only the background changes shape.
The favicon generator measures the artwork rather than its bounding box: it scales the image until the covered pixel farthest from the centre reaches the circle, less the padding you choose, and clears anything the resampling spreads past it. A round mark can therefore fill nearly the whole safe zone, while a square photo ends up smaller, because its corners must also fit inside the circle.
Purpose any or maskable: why two files
An icon can declare "purpose": "any maskable", and web.dev's manifest article uses that form. web.dev's own maskable icon article advises against it: an icon padded for masking looks too small where it is shown unmasked. The sources disagree, and two files avoid the trade-off. The any icon keeps its transparency and its artwork fills the square; the maskable icon has the full-bleed background and the artwork inside the safe zone.
| Purpose | Background | Artwork | Where it shows |
|---|---|---|---|
any |
Transparent | Fills the square, less padding | Anywhere an icon is shown uncropped |
maskable |
Your background color, edge to edge | Inside the 40 % circle | Launchers that crop icons to a shape |
A manifest with both kinds
This is the site.webmanifest from the example package. Icon paths are relative: the specification resolves src, like start_url, against the manifest's own URL, so the icons work from any folder as long as they sit next to the manifest.
{
"name": "png2svg.art",
"short_name": "png2svg",
"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-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
Link it from every page with <link rel="manifest" href="/site.webmanifest">. The specification names .webmanifest as the registered file extension and encourages serving it as application/manifest+json, although any JSON type is accepted.
The sizes are not arbitrary. MDN's installability guide, updated in September 2026, says that, among other conditions, Chromium browsers install a web app only when its manifest has a name or short name, a start_url, a display mode and icons at 192 and 512 px, and the site is served over HTTPS. Safari works differently: the WebKit team wrote for Safari 26 that there are no installability requirements, and that manifest icons are used when a site defines them. MDN also suggests starting from artwork at least 1,024 px square; a small bitmap scaled up to 512 px cannot gain detail.
How to test a maskable icon
In Chrome, open DevTools, go to Application → Manifest, and tick Show only the minimum safe area for maskable icons. The icons section then shows each maskable icon cut to the safe zone: if anything important is missing there, a launcher may cut it too. Chrome's documentation describes this option. web.dev also points to Maskable.app, a third-party site where you can preview an icon under several masks. The final check is an installed app on a real phone.
A real example to download
The icons above come from one run of the favicon generator on this site's own mark (a committed SVG, not anyone's upload), with an 8 % padding and a #e8efff background. A test rebuilds the package and fails when these files drift from what the tool produces. Download the example package (ZIP) to see every file with its README. For the browser tab side of the same package, read SVG vs PNG vs ICO favicons.