A maskable icon hands the platform a full-bleed square and lets it crop to whatever shape it likes — a circle on one launcher, a squircle on another, a teardrop on a third. The failure is always the same: artwork sized for a square loses its edges to the crop. This shows the icon under every mask at once, against both safe circles, and measures exactly how much each one takes.
Step by step
01Load the artwork
A square PNG or SVG of the mark alone, without a background — the background is painted here so it can run edge to edge. The file is decoded in this page and never uploaded.
02Pull it inside the safe circle
The dashed ring is the 80% circle the maskable specification guarantees. Fit safe zone sizes the artwork to it in one click; the nudges are for a mark that is not optically centred.
03Read every mask at once
Each shape reports whether it is clear, grazing, or clipping, with the percentage of artwork it removes. An icon has no say in which mask it meets, so it has to survive all of them.
04Take the set and the manifest entry
192 and 512 at both purposes, zipped, with the icons array to paste into your web app manifest.
Worked example
Maskable icons and Android adaptive icons are separate systems with separate numbers. Designing to the wrong one is the usual cause of a clipped mark.
Given
What each system promises
web manifest, purpose maskable
canvas the whole square
safe centre circle at 80% → 409px of 512
android adaptive icon
canvas 108dp
masked 72dp
safe inner 66dp ≈ 61% → 313px of 512The adaptive circle is markedly tighter than the maskable one, because an adaptive icon's outer band is reserved for the parallax animation rather than for artwork. If the same mark ships to both, size it to the adaptive circle and the maskable one takes care of itself. A mark that fills 80% is compliant as a maskable icon and still loses its edges as an adaptive one.
Before you ship the manifest
The background must run edge to edge
A maskable icon is cropped by the platform, so it should hand over a full square and let the platform shape it. An icon that rounds its own corners and leaves the rest transparent gets those transparent corners composited onto the home screen, which is where the black or white notch around an icon comes from.
Only the centre 80% is guaranteed
The maskable specification promises a centred circle of 80% of the icon's minimum dimension and nothing else. Everything outside it is bleed the platform may keep or crop, which means it can hold colour but must not hold anything a reader needs.
Android's adaptive safe zone is tighter still
Adaptive icons are drawn on 108dp, masked to 72dp, and guarantee only the inner 66dp — roughly 61%, against the maskable 80%. The outer band exists so the foreground and background layers can move independently when the launcher animates them.
List any and maskable separately
A single entry with purpose 'any maskable' has to look right full-bleed and survive a 20% crop, which usually means it does neither well — and several browsers have shipped bugs handling the combined value. Two entries pointing at the files each purpose wants is unambiguous.
A favicon is not a maskable icon
Reusing a favicon here is the most common mistake. A favicon is designed to fill its square and is read at 16 pixels; a maskable icon is designed to lose a fifth of its area and is read at 192. The mark usually needs to be redrawn smaller against more background, not merely rescaled.
Test the shapes, not the specification
Compliance with the 80% circle is necessary and not sufficient — a wide mark can sit inside the circle and still catch the corners of a square mask. Reading every shape at once is the only way to see that, which is why they are all shown rather than offered behind a picker.
The judgement call
As a percentage of the icon, before any mask is applied.
A mark shipping to both web and Android
About 60%
Sized to the tighter adaptive circle, so it is safe on every launcher and every browser.
A web-only PWA icon
Up to 80%
The maskable specification guarantees the centre 80%, and nothing more is promised.
A wide or wordmark-shaped logo
Under 60%
Width is what catches a square mask's corners. Check the square preview rather than trusting the circle.
A single letter or a simple glyph
60–70%
A compact shape sits comfortably inside both circles and still reads at launcher size.
Artwork that already has its own padding
80–100%
Adding the tool's inset on top of built-in padding leaves the mark tiny. Check the previews rather than the number.
Filling the whole square
Never
Every mask crops. Artwork at 100% loses its edges on every platform without exception.
Reference
FAQ
A centred circle with a diameter of 80% of the icon's minimum dimension — radius 40%. That is the only region the web app manifest specification guarantees will survive masking, so anything a reader needs must sit inside it. The area outside is bleed that a platform may keep or crop depending on the shape it masks to.
A white or black border usually means the icon rounds its own corners and leaves the rest transparent, so the platform composites those transparent corners onto the home screen. A maskable icon should be a full-bleed square with the background running edge to edge, letting the platform apply the shape. Cropped artwork means the mark sits outside the 80% safe circle.
They are separate systems with different safe zones. A maskable web manifest icon guarantees a centred circle of 80%, while an Android adaptive icon is drawn on a 108dp canvas, masked to 72dp, and guarantees only the inner 66dp — about 61%. Design to the adaptive figure if the same mark ships to both, because it is the tighter of the two.
Prefer two separate entries, one with purpose 'any' and one with purpose 'maskable'. A single icon claiming both has to look correct full-bleed and also survive a 20% crop, which usually means it does neither well, and several browsers have shipped bugs handling the combined value.
Rarely without changes. A favicon is drawn to fill its square and be legible at 16 pixels, whereas a maskable icon must give up its outer fifth to the platform's crop. The mark usually needs to be scaled down against more background rather than simply reused, which is what the artwork size control here is for.
No. The Tinapps maskable icon generator decodes your file with the browser's own FileReader and renders, measures and zips everything on a canvas in the page. No request carries your artwork, which makes it safe to use an unreleased logo here.
Artwork is decoded, masked, measured and packaged entirely in your browser. Nothing is uploaded at any point.
Keep going
App icon generator
The full iOS and Android export from the same square source.
Favicon generator
The browser-tab half of the same identity, checked at 16 pixels.
Image cropper
Square up artwork that is not already square before bringing it here.
Contrast checker
Check the mark against the background fill you chose.