Your icon in every mask it will meet
iOS rounds it, Android may circle or squircle it, and a tab shows it at sixteen pixels. All of them at once, from one file.
Your icon in every mask it will meet
iOS rounds it, Android may circle or squircle it, and a browser tab shows it at sixteen pixels. This shows all of them at once, from one SVG.
An icon is not a shrunken logo
The most common failure is treating the app icon as a delivery format for the existing logo. Logos are frequently horizontal, frequently contain the company name, and are designed to be read at the width of a letterhead. An icon is a small square viewed at a glance among dozens of others, and any wordmark in it stops being legible somewhere around 48 pixels — leaving a grey smudge where the name was.
What survives is a single distinctive element: one letter, one shape, one silhouette, in strong colour. Established products almost all do this, keeping the icon and the logo as related but separate marks. If the logo has no element that can stand alone, the icon is a design job rather than an export setting.
Recognition is silhouette and colour, in that order
Nobody reads an icon. On a crowded home screen it is found by shape and colour in peripheral vision, usually in well under a second, and the interior detail contributes almost nothing at that speed.
That has two consequences worth designing around. Detail below a certain size is not merely lost, it is actively harmful — fine lines alias into grey mush and muddy the silhouette that was doing the work. And the icon competes in an environment you do not control: alongside whatever else is installed, on a wallpaper you have not seen, in light and dark, at whatever corner radius the platform imposes this year. Checking it against a busy screenshot at real size tells you far more than any amount of inspection at full resolution, where every icon looks good.
The masks, and the safe area
iOS applies its own superelliptical mask and ignores any corner radius in your file. Drawing rounded corners yourself means they get rounded twice.
Android adaptive icons are a foreground and a background layer, and the launcher chooses the mask — circle, squircle, rounded square or teardrop depending on the device. Only the centre 66 × 66 of the 108 dp canvas is guaranteed visible.
The dashed circle in the previews is that safe area. Anything outside it may be cropped on some devices and not others.
Design for the smallest, check at the largest
An icon has to work at 16 pixels in a tab and at 512 in a store listing. The 16-pixel case is the constraint: it takes one shape and two colours, and almost nothing else survives.
Do not draw the corners
Every platform applies its own mask. An icon with baked-in rounded corners gets a second, tighter rounding on iOS and a visible pale border on Android where the background stops short of the mask.
Fill the whole canvas edge to edge and let the platform cut the shape.