App Icon Sizes Explained: iOS, Android, Store and Web
The first time you ship an app, the number of icon sizes can be a surprise. Each platform has different screen densities and places where the icon appears, so the same artwork has to be prepared at many sizes. This article narrows it down to the sizes you really need and points out the easy mistakes.
Start with one 1024×1024 original
Every icon is scaled down from a single large original. Prepare a 1024×1024 square PNG and leave the corners square instead of rounding them. iOS and Android apply the rounded shape themselves. If you round the corners in the original, you end up with transparent or black gaps in the corners.
iOS
Recent versions of Xcode accept a single 1024 image, but including the sizes used on older devices, in Settings, notifications and Spotlight keeps the icon sharp at small sizes. The main sizes are:
| Use | pt | Pixels |
|---|---|---|
| Home screen (iPhone) | 60 | 120, 180 |
| Spotlight | 40 | 80, 120 |
| Settings | 29 | 58, 87 |
| Notifications | 20 | 40, 60 |
| Home screen (iPad) | 76, 83.5 | 152, 167 |
| App Store | 1024 | 1024 |
The most common mistake is a transparent background. The App Store rejects icons with an alpha channel, so always fill the background before saving.
Android
Android splits icons into mipmap folders by screen density. Based on 48dp, that is 48 pixels for mdpi, 72 for hdpi, 96 for xhdpi, 144 for xxhdpi and 192 for xxxhdpi. Since Android 8, adaptive icons keep the foreground and background separate, and each device maker crops them into its own shape, such as a circle, rounded square or teardrop.
The adaptive icon foreground is 108dp, but you should assume only a 66dp circle in the middle is always visible. If your logo goes outside this safe area, some devices will cut it off. That is why the foreground image is usually the original scaled to about 61% and centered.
Play Store and web
- Play Store listing icon: 512×512 PNG
- Web app (PWA): 192×192, 512×512, plus a maskable 512 with a safe area
- Adding a website to the iPhone home screen: apple-touch-icon 180×180
Make them all at once
Making each size by hand is error-prone. A tool that takes one original and also sets up the folder structure, Contents.json and the adaptive icon XML saves a lot of time.
Afterwards, check on a real device that the icon is still recognizable at a small size. Most of the time an icon is shown about as big as a fingernail, so one bold, memorable shape works better than lots of text.