Maskable Icon Safe Zone: How the 80% Rule Works

Regions of a maskable icon

What masking actually does

When a web app is installed, the operating system may present its icon inside a shape of its own choosing: a circle on some launchers, a squircle on others, a rounded square elsewhere. It does not add a background for you, and it does not scale the artwork down to fit; it applies the shape to the image you supplied.

That is the whole reason the maskable purpose exists. Declaring an icon as maskable tells the system that the file has been designed with that cropping in mind, which allows it to use a larger, better-fitting icon than it would with an unpadded one.

Where the 80% figure comes from

If the worst case mask is a circle inscribed in the square, then anything outside that circle can be lost. The circle touches the middle of each edge, leaving roughly the outer 10% on every side as expendable. Keeping meaningful content inside the remaining inner area is what the guidance calls the safe zone.

Expressing it as a percentage makes it portable: at 512 px the safe radius is about 205 px of padding on each side. The practical habit is simpler than the arithmetic, however, because a design that respects the safe zone rarely needs the exact number.

Failure mode one: content that gets cropped

The common case is a wordmark or a stylised letter drawn edge to edge. It looks deliberate as a square and loses its outer strokes the moment a circular mask is applied. Text is the worst offender, because a cropped letter stops being legible rather than merely looking tighter.

The fix is not to shrink everything by a fixed factor but to redraw with the safe zone as a boundary: enlarge the background, keep the mark inside the inner circle, and let the composition breathe.

Failure mode two: empty corners after masking

The opposite mistake is artwork that stops short of the edges because it was designed for a rounded card. Nothing gets cropped, but the mask reveals the area outside the artwork as transparent or as the canvas colour, so the installed icon shows dark or white wedges.

Backgrounds therefore belong to the full square, not to the mark. Extend the colour or texture to all four edges and let the mask decide where it ends.

How to verify a file in a minute

Overlaying the safe-zone circle on your own artwork answers both failure modes at once: if the mark crosses the circle, content is at risk; if the artwork does not reach the edges, the corners are. Checking the file before it ships is faster than reinstalling the web app on three devices to compare launcher shapes.

Keep two exports from the same master: a padded maskable version for the manifest, and a tighter any-purpose version for contexts that do not mask, such as the browser tab and the iOS home-screen bookmark.