Your icon is shown at roughly 48 to 60 px in search results, next to a dozen competitors, for about a second. It is the highest-leverage image you will produce, and it is usually designed last.
Design for the smallest size first
Almost every bad icon is a good design shrunk too far. Start at 48 px and scale up, not the reverse. If it does not read at 48 px, no amount of polish at 1024 px will rescue it.
The practical consequences:
- No text. Not your app name, not a tagline. At 48 px a word becomes a grey smudge. The one defensible exception is a single letter used as a monogram.
- One idea. A single recognisable shape. Two objects overlap into mush.
- Thick strokes. Anything thinner than about 4 percent of the icon's width disappears.
- Generous internal padding, around 15 to 20 percent. Art crowding the edge feels cramped and risks being clipped by masking.
Silhouette is what people actually recognise
Users find your icon by shape and colour before they process any detail. Squint at it: if the remaining blob is distinctive, the icon will be findable on a crowded home screen. If it collapses into a generic rounded square, it will not.
This is why so many successful icons are one bold shape on one flat colour. It is not minimalism as a style preference — it is legibility.
Colour choices that survive context
- Pick a colour your competitors are not using. Look at the top 20 in your category and choose an underused hue. - Avoid pure white or near-white backgrounds. They vanish against light home screens and light store pages. - Avoid full-bleed near-black for the same reason in dark mode. - Limit yourself to two or three colours. Gradients are fine, but keep them within one hue family. - Check it against both light and dark wallpapers, since you control neither.
Understand platform masking
Each platform crops your icon differently, and designing without accounting for that produces clipped artwork.
- iOS applies a squircle mask — a superellipse, not a plain rounded rectangle. Supply a full-bleed square with no rounding of your own and no alpha channel; the system does the rounding.
- Android adaptive icons are two layers, foreground and background, on a 108 dp canvas of which only the centre 72 dp is guaranteed visible. Launchers mask that to circles, squircles or squares and animate it, so anything outside the centre two-thirds may be cropped somewhere.
- Android 13+ themed icons additionally take a monochrome layer, tinted to the user's wallpaper palette. If your icon only works in its brand colours, it will look poor when themed.
The file set you actually need
Producing an icon means producing dozens of files:
- iOS: an AppIcon set spanning 20 pt to 1024 pt across 1x, 2x and 3x, with a Contents.json manifest. The 1024 marketing icon must be opaque, with no alpha channel.
- Android: legacy mipmaps at mdpi through xxxhdpi (48 to 192 px), adaptive foreground and background layers at 108 dp across the same densities, the anydpi-v26 XML binding them together, an optional monochrome layer, and a 512 x 512 Play Store icon.
- Web, if applicable: favicons at 16, 32 and 48 px, a 180 px Apple touch icon, 192 and 512 px PWA icons, and a maskable variant carrying extra padding.
Producing these by hand is tedious and error-prone; the manifest files in particular are easy to get subtly wrong. Icon generators, MoonStart's included, exist mainly to make that fan-out reliable rather than to design the icon for you.
A short test before you ship
- View it at 48 px beside five competitors from your category. - View it on both a light and a dark wallpaper. - Apply a circular mask and confirm nothing important is clipped. - Ask someone unfamiliar with the app what they think it does. If they cannot guess the category, the metaphor is too abstract. - Confirm the 1024 px version has no transparency before uploading.