Most "app icon size" charts online still list fifteen iOS sizes and a dozen favicons. You don't need most of them anymore. Here's what each platform actually asks for today, and the two mistakes that get icons cropped or rejected.
Start with one 1024×1024 PNG
Everything below can come from a single square image:
- 1024×1024 pixels, exactly square
- PNG, so there are no compression artifacts
- No transparency and no rounded corners. Fill the whole square. Both Apple and Google apply their own corner mask, so if you round the corners yourself, you get a rounded square inside a rounded square.
- No drop shadow around the edge. Google Play adds its own. Shadows and lighting inside the artwork are fine.
iOS: one file
Since Xcode 14, an app icon set can contain a single 1024×1024 image. Xcode generates every runtime size (Home Screen, Spotlight, Settings, notifications, iPhone and iPad) at build time.
So for iOS you need:
| File | Size | Notes |
|---|---|---|
| App icon | 1024×1024 | No alpha channel. This is also the App Store icon |
The old fifteen-file set (20, 29, 40, 60, 76, 83.5 points at @1x, @2x and @3x) only matters if you build with Xcode 13 or older.
Dark and tinted icons. iOS can show a dark and a tinted version of your icon. If you don't provide them, the system generates them from your main icon. If you care how your icon looks on a dark Home Screen, design them yourself.
Icon Composer. Apple's newer tool builds layered .icon files for the Liquid Glass look. Expo supports pointing ios.icon at a .icon file from SDK 54. If you're starting out, a single PNG still works.
Android: launcher icons, the Play Store icon, and the adaptive icon
Android is where the work is.
Legacy launcher icons
One file per screen density, all from the same 48dp icon:
| Density | Folder | Size |
|---|---|---|
| mdpi | mipmap-mdpi |
48×48 |
| hdpi | mipmap-hdpi |
72×72 |
| xhdpi | mipmap-xhdpi |
96×96 |
| xxhdpi | mipmap-xxhdpi |
144×144 |
| xxxhdpi | mipmap-xxxhdpi |
192×192 |
Google Play Store icon
This one is uploaded in Play Console, not shipped in the app:
- 512×512, 32-bit PNG, sRGB
- Max 1024 KB
- Full square. Google Play applies the corner radius and the shadow itself.
- No badges or text that suggest ranking, price or a Play category
Adaptive icons (where most icons go wrong)
Since Android 8, launchers build your icon from two layers, a foreground and a background, and then cut it into whatever shape the phone maker chose: a circle, a squircle, a rounded square.
The numbers that matter, from Android's guidelines:
- Each layer is 108×108 dp
- Only the center 66×66 dp is guaranteed to stay visible. Anything outside it can be clipped by the mask.
- Your logo should be at least 48×48 dp and no bigger than 66×66 dp
In pixels, on a 1024×1024 foreground image, keep your logo inside the center 626×626. That leaves roughly 200 pixels of empty space on every side.
This is the most common icon mistake: taking the full-bleed iOS icon and using it as the adaptive foreground. The launcher zooms into the middle, and the edges of your logo get cut off on circular masks.
The fix: make a separate foreground image with your logo shrunk into the safe zone, and put the colour or pattern in the background layer.
Themed icons
On Android 13 and later, users can turn on themed icons, and the system tints your icon to match their wallpaper. For that you add a monochrome layer: a single-colour version of your logo, same 108dp canvas, same safe zone. Without it, your icon stays in full colour while the rest of the Home Screen is themed (Android 16 QPR 2 now auto-themes apps that don't provide one).
Expo: where each file goes
In an Expo app, you don't place any of these files by hand. You point app.json at a few images and the build generates the native folders:
{
"expo": {
"icon": "./assets/images/icon.png",
"ios": {
"icon": "./assets/images/icon.png"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#0099FF",
"monochromeImage": "./assets/images/adaptive-icon-monochrome.png"
}
},
"web": {
"favicon": "./assets/images/favicon.png"
}
}
}
-
icon: your 1024×1024 PNG -
ios.icon: optional. Use it for a different iOS icon, an object withlight,darkandtintedPNGs, or a.iconfile from Icon Composer (SDK 54+) -
android.adaptiveIcon.foregroundImage: the padded foreground from the section above, not the full-bleed icon -
android.adaptiveIcon.backgroundColororbackgroundImage: the background layer -
android.adaptiveIcon.monochromeImage: the single-colour layer for themed icons
After changing icons, rebuild. Icons are part of the native app, so an over-the-air update won't change them.
Web and PWA
If your app also runs on the web:
| File | Size |
|---|---|
apple-touch-icon.png |
180×180 |
android-chrome-192x192.png |
192×192 |
android-chrome-512x512.png |
512×512 |
site.webmanifest |
lists the 192 and 512 icons |
Modern browsers pick these up, so the old 16, 32 and 48 pixel favicons are optional.
Checklist before you submit
- [ ] Source icon is 1024×1024, square, PNG, no transparency, no rounded corners
- [ ] iOS icon has no alpha channel
- [ ] Play Store icon is 512×512, under 1024 KB, no baked-in corners or shadow
- [ ] Adaptive foreground keeps the logo inside the center 66dp (626 px of 1024)
- [ ] Checked on a circular mask, not just a rounded square
- [ ] Monochrome layer added if you want themed icons on Android 13+
- [ ] New native build made after changing icons
Generate them all at once
Our free App Icon Resizer takes one 1024×1024 image and gives you a ZIP with the iOS icon set and Contents.json, all five Android mipmap sizes, the 512 Play Store icon, the web icons and manifest, and the Expo files. It runs entirely in your browser, so your icon is never uploaded.
One thing it can't do for you is design the adaptive foreground: shrinking your logo into the safe zone is a design decision, not a resize. Do that one by hand using the numbers above.
And if you're still at the "I need an app to put this icon on" stage, RapidNative turns a prompt into a real React Native app you can preview on your phone.
Top comments (0)