App icons
that survive 40 pixels.
You design at 1024 and your users see 40. Most icon advice is about taste; this is about what actually stays legible once the platform has shrunk it, masked it, and put it next to twenty other apps.
The only size that matters is the smallest one
You design at 1024 pixels and your users see 40. In a Spotlight result, a notification, a Settings row, the icon is smaller than the text next to it. Every decision should be made at that size and then checked at 1024, not the other way round.
The practical test: export at 40 pixels, put it on your home screen next to the apps you actually use, and see whether you can find it without reading the label. If you cannot, the mark is too complex. Detail that only resolves at large sizes is decoration you are paying for with recognisability.
One idea, one shape
Icons that work are almost always a single silhouette. A letterform, an object, an abstract mark. Icons that fail are usually two or three ideas competing, or a scene rendered small. If you can describe your icon in one short phrase without an "and", it will probably survive downscaling.
Contrast does the rest. The icon sits on wallpapers you cannot predict, in light and dark system themes, on a grey Settings background. High internal contrast between the mark and its background is what keeps it legible in all of those. Low-contrast, tonal icons look sophisticated in a design tool and disappear on a device.
No text
At 40 pixels a word is a smudge. The exception people cite is a single letter used as the mark itself, which works because it is a shape rather than something to read. Your app name already appears directly below the icon on every surface, so repeating it inside is spending your only visual asset on redundancy.
Platform shapes differ, and it matters
iOS applies its own rounded-rectangle mask. You supply a full-bleed square with no alpha channel and no pre-rounded corners. Ship a PNG with transparent corners and the store rejects it; ship one with corners you rounded yourself and you get a visible double-rounded edge.
Android is the opposite problem. Adaptive icons take a foreground and a background layer, and the launcher crops them to whatever shape the manufacturer chose: circle, squircle, rounded square, teardrop. Anything important must sit inside the central safe zone, because the corners will be cut on most devices. A design that assumes a square will lose its edges.
The consequence is that a single flattened square rarely serves both platforms well. Design the mark, then compose it separately for each.
Start from vector, export once
Design in vector and export the 1024 from that, then downscale everything else from the 1024. Upscaling is the single most visible mistake on a product page, because 1024 is the size shown full-bleed when someone taps your icon. A soft 1024 reads as an app made carelessly, and there is nowhere to hide it.
Keep the source file. Store requirements change, new sizes appear with new hardware, and a vector source turns that into a five minute job rather than a redraw.
Testing it before you commit
- Grey it out. Desaturate to greyscale. If it stops working, you are relying on colour alone and it will fail for colour-blind users and on some backgrounds.
- Put it in a row. Place it beside five popular apps in your category. Distinctive matters more than beautiful.
- Blur it. A heavy blur approximates small-size perception. The silhouette should still be identifiable.
- Check both themes. Look at it on a white home screen and a black one.
The icon is testable
Apple's Product Page Optimization treats the icon as a variable you can test, and because the icon appears in search results it affects how many people reach your listing at all, not just how many convert once they arrive. That makes it one of the highest-leverage things to experiment with, and one of the few worth the traffic cost for a small app. The testing guide covers how to run it.
The technical spec, platform by platform
The design advice above is the hard part. These are the mechanical rules that get a build rejected at upload, which is a much cheaper failure to avoid.
What size should my source icon be?
Design at 1024x1024 and export everything from that. Upscaling is the most visible mistake on a product page, because 1024 is the size shown full bleed when someone taps your icon.
Why does Apple reject icons with transparency?
App Store Connect requires a fully opaque icon. Flatten the alpha channel onto a solid background before you upload, or the build is rejected at processing rather than in review.
Do I need the rounded corners?
No. Both platforms mask the corners themselves. Supply a full bleed square and let the OS round it, otherwise you get a rounded shape inside another rounded shape.
Does it upload my icon anywhere?
No. The file is read into the page, resized on a canvas and zipped locally. Nothing is sent to a server.
Worth knowing
- App Store needs 1024×1024; Play needs 512×512. The rest are launcher and asset-catalogue sizes.
- Never upscale. A source under 1024 gets soft at the top end and there is nowhere to hide it.
- iOS icons must have no alpha channel, export full-bleed and let the platform mask it.
- Android adaptive icons expect padding; the launcher crops to its own shape.
The icon resizer applies all of this: it strips alpha for the iOS set, pads the maskable variants inside the safe circle, packs the Windows sizes into one .ico, and writes the Xcode Contents.json alongside.