App icon sizes, and what makes an icon work at 40 pixels

The icon is the only asset that follows a user home. It appears in search, on the product page, in Settings, in Spotlight, in notifications, and on a home screen next to apps built by companies with design teams.

It is also the asset most often designed at 1024 × 1024 and never looked at again.

Design for the small size, export the large one

The store listing wants 1024 × 1024. Almost nobody sees it at that size.

What people actually see is roughly 60 points on a home screen, around 40 in search results, and smaller still in Settings and notifications. An icon with fine detail, thin strokes, a gradient with subtle stops or — worst — text will turn to mush at every size that matters.

The working method: design at 1024 because that is what you export, but keep a 40-pixel preview on screen the entire time. If it does not read at 40, nothing else about it matters.

What iOS actually needs

The App Store takes a single 1024 × 1024 marketing icon. Everything else is generated for the app bundle from your source artwork, across idioms and scale factors:

Idiom	Points	Scales
iPhone	20, 29, 40, 60	@2x, @3x
iPad	20, 29, 40, 76	@1x, @2x
iPad Pro	83.5	@2x
Marketing	1024	@1x

That is eighteen files before you have thought about Android. Generating them by hand is a solved problem and not worth your time — any decent tool does the whole set from one 1024 source.

What Android needs

Android is a different model. Adaptive icons separate the artwork into a foreground layer and a background layer, and the system applies a mask that varies by device and launcher — circle, squircle, rounded square, teardrop.

Two consequences:

Your artwork gets cropped, and you do not control how much. The safe zone is considerably smaller than the canvas. Anything near the edge may be cut on some devices and not others.

Both layers are rendered at every density — mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, at 1×, 1.5×, 2×, 3× and 4×.

Play also wants a 512 × 512 hi-res store icon, separate from what ships in the app.

Web, while you are there

If your app has a marketing site, the same artwork should produce favicons at 16, 32 and 48, an Apple touch icon at 180, and PWA icons at 192 and 512. Same source, no extra design work, and it is the difference between a browser tab showing your mark and showing a blank page glyph.

Three things that separate a good icon

1. One idea, large

Not your whole product. One shape, one metaphor, filling most of the canvas. The most common mistake is an illustration that would work on a poster, shrunk.

2. Silhouette before colour

Squint at it, or render it as a flat black shape. If it is still recognisable, it will survive small sizes, low contrast, dark mode and a cluttered home screen. If the silhouette is mush, no amount of gradient work rescues it.

3. Different from your category

If every app in your category is a blue rounded square with a white glyph, being a slightly different blue rounded square is not differentiation — it is camouflage. Open the top twenty in your category, put your icon among them, and see whether your eye finds it.

What not to put in one

• Text. Unreadable at 40 pixels, and your name is directly underneath it anyway.
• A screenshot of your UI. Detail disappears entirely.
• Photographs, usually — they rarely survive the crop or the scale.
• Thin strokes under about 4 pixels at 1024, because they vanish.
• Anything depending on the corners, since both platforms mask them differently.

Test it properly

1. Render at 40 pixels and look from arm's length.
2. Render as a flat silhouette — still recognisable?
3. Put it on a real home screen among real apps, light and dark.
4. Place it in a grid with your top competitors. Does your eye find it?
5. Check the Android circular mask has not cropped anything essential.

Then consider testing it — both stores support icon experiments. Note Apple requires alternate icons to already be in the submitted binary, so plan an icon test a release ahead.