DEV Community

Cover image for App Icon Sizes for iOS, Android and Expo: What You Actually Need
Famitha M A for RapidNative

Posted on

App Icon Sizes for iOS, Android and Expo: What You Actually Need

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"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • icon: your 1024×1024 PNG
  • ios.icon: optional. Use it for a different iOS icon, an object with light, dark and tinted PNGs, or a .icon file from Icon Composer (SDK 54+)
  • android.adaptiveIcon.foregroundImage: the padded foreground from the section above, not the full-bleed icon
  • android.adaptiveIcon.backgroundColor or backgroundImage: 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)