Your icon is not the shape you drew it
Since Android 8.0 the launcher decides what shape an app icon is. Pixel launchers use a squircle, Samsung's One UI uses a rounded square, some third-party launchers use circles or teardrops, and the same APK produces a different silhouette on each. You supply artwork; the system supplies the outline.
That is what an adaptive icon is: two layers — a background and a foreground — on a 108dp canvas, of which the launcher shows whatever its mask allows. The consequences are entirely predictable and almost always discovered too late, on somebody else's phone.
The 72dp safe zone
Of that 108dp canvas, only the central 72dp — about two thirds is guaranteed visible. The outer ring exists so launchers can animate the icon, apply parallax as you scroll, and mask it to their own shape. Anything you place out there is at risk.
The checker above measures this properly rather than eyeballing it: it renders your foreground at 108dp, counts the pixels that are actually inked, and reports what fraction falls outside the safe circle. Under 2% is fine. Over 12% means a circular mask will visibly cut your design.
What each mask does to a design
| Mask | Used by | What it punishes |
|---|---|---|
| Circle | Many third-party launchers | Corner detail, square logos with hard edges |
| Squircle | Pixel launcher | Slightly less than a circle, same failure mode |
| Rounded square | Samsung One UI | Most forgiving — nearly everything survives |
| Teardrop | Some OEM launchers | Asymmetric — a centred design is unaffected |
The practical rule: if it survives the circle, it survives everything.
Designing for it
- Centre the mark and keep it small. A logo filling 60–70% of the canvas reads correctly under every mask.
- Let the background bleed. The background layer should extend to the edges — that is its job. Only the foreground needs restraint.
- Do not pre-round your corners. Baking a rounded rectangle into the foreground gives you corners inside corners once the mask applies.
- Avoid outer rings and borders. A circular border drawn near the canvas edge is precisely what gets shaved off.
- Watch text. A single letterform can work; a word placed across the full width will lose its ends.
Legacy icons and the sticker effect
An app that ships only a traditional square icon still appears on Android 8+, but the launcher cannot mask artwork it does not have layers for. It centres your square inside a white shape instead — the "sticker" look, a small icon floating on a white circle, that instantly marks an app as not having been updated in years. Supplying an adaptive foreground avoids it entirely.
Our icon generator exports a 432×432 foreground padded to respect the safe zone, which is the layer this previewer expects. Use the two together: generate the set, then check it here before you ship.
Why previewing beats guessing
Every part of this is deterministic — the canvas is 108dp, the safe zone is 72dp, the masks are fixed shapes. There is no reason to find out from a user that your logo has lost its edges. Thirty seconds here replaces a release cycle.