Adaptive and Maskable Icons: Safe Zones That Stop Your Logo Being Cropped

Keep the important part of your logo inside the middle 61 percent of an Android adaptive icon layer, and inside the middle 80 percent of a PWA maskable icon. Those two numbers, 66 out of 108 and 80 out of 100, are the difference between a crisp launcher icon and one whose edges are sliced off by a circle. This guide explains where the numbers come from, how the masks behave, and how to check your own design in seconds.

What a mask does to your icon

Older launchers displayed whatever square image you gave them. Modern ones decide the shape. Depending on the phone maker, the user's theme or the launcher in use, your icon may be shown as a circle, a rounded square, a squircle or a teardrop. The launcher cuts the shape out of your image, so anything outside that shape disappears. If your logo extends to the edge of the square, a circular mask removes the corners and, with them, any part of the design that lived there.

That is why platforms define a safe zone: an area guaranteed to be visible no matter which shape is applied. Design inside it, and you are safe everywhere. Design outside it, and you are gambling on the shape the user's phone happens to use.

Android adaptive icons: the 108 dp canvas and the 66 dp safe zone

An adaptive icon consists of two layers, a background and a foreground, each drawn on a 108 × 108 dp canvas. The system masks the combined result, and it can also move the layers slightly relative to each other for parallax and animation effects. To allow that movement, the outer ring of each layer is deliberately never shown as part of the base icon. The visible window is 72 × 72 dp in the centre, and the guaranteed safe zone for essential content, such as a logo, is the central 66 × 66 dp circle.

Divide 66 by 108 and you get 0.611, so the safe area is about 61 percent of the layer's width. In pixels at the five density buckets (mdpi to xxxhdpi), the layer sizes are 108, 162, 216, 324 and 432, and the safe diameter is 66, 99, 132, 198 and 264 pixels. The generator's "Android adaptive foreground" option does this scaling for you: it shrinks your image so its longest side fits in 61 percent of the layer and leaves the rest transparent, which is exactly what a foreground layer should look like.

Two practical details follow. First, keep the foreground transparent so the background layer, usually a solid colour or gradient, shows around the logo. Second, give the background layer its own full-bleed colour or pattern. Because the full 108 dp canvas can be revealed during animations, a background that only fills the inner square will show gaps.

PWA maskable icons: the 80 percent rule

Progressive web apps use a different but related system. The web app manifest can declare an icon with "purpose": "maskable". The browser or operating system then masks it just as Android masks adaptive icons. The specification defines the safe zone as a circle in the centre whose radius is 40 percent of the icon's width, so the diameter is 80 percent. Content inside it is never clipped, and the remaining 10 percent margin on each side may be.

A maskable icon is also expected to have a solid, full-bleed background, because there is no separate background layer. If you use a transparent PNG, the platform fills the empty area with white or black, which may clash with your branding. The generator's maskable 512 file therefore paints your chosen background colour edge to edge and shrinks the artwork to at most 80 percent. Ordinary PWA icons, the 192 and 512 files marked for the default purpose, are not shrunk, which suits browsers that display them unmasked.

iOS is different: one mask, applied for you

On iOS there is a single, system-defined mask, a continuous-corner rounded rectangle, and it is applied automatically to the square image you supply. You do not need a separate safe zone in the technical sense, but the same advice holds visually: keep the key element away from the extreme corners, because the mask removes them. Do not round the corners yourself, and do not include a drop shadow or a border that imitates the mask; both look wrong after the system treatment. Because iOS icons have no transparency, any area you leave empty is filled by your background colour, so choose one deliberately.

How to check your design in ten seconds

Load your image into the app icon generator and look at the preview strip under the tool. It draws your artwork inside a circle, a squircle and a square, using the maskable settings. If the logo is cut off in the circle, increase the padding slider until it is not. If it looks lost and tiny in the square, you have gone too far. Aim for a symbol that nearly fills the circle without touching its edge.

1. Pick Contain if your image is a complete logo you do not want cropped, or Cover if it is a photo or a full-bleed pattern that should fill the square.
2. Set the background colour to the colour you want behind a transparent logo.
3. Raise the padding in steps of five percent and watch the circle preview.
4. Download the ZIP and test on at least one Android phone and one iPhone, since manufacturers' masks differ.

Designing a logo that survives any shape

The most robust icons share a few traits. They use one dominant shape or letter, rather than a wordmark, because small text is the first casualty of both masking and downscaling. They have strong contrast between the symbol and the background, which keeps them legible on busy wallpapers. They centre the main mass of the design, since every mask is centred. And they avoid thin outlines near the edge, which anti-alias into blur at 48 pixels and vanish under a circle.

It also helps to design the foreground and background as separate layers from the start. A foreground logo on a transparent layer can be reused for the Android adaptive icon, composited onto a solid colour for iOS and Apple touch icons, and padded for the maskable web icon. You change only the padding and background, not the artwork. That single source file, exported at 1024 pixels, is all the generator needs.

For the full list of pixel sizes each platform wants, see the app icon size reference. Platform rules evolve, so check Android's adaptive icon documentation and the web app manifest specification for any updates before you publish.