Guides7 min read

Every App Icon Size You Actually Need in 2026

The complete icon size list for iOS, Android and the web, plus the two rules that decide whether your icon survives being shrunk to 48 pixels: the Android safe zone, and designing for the smallest size first.

Anwer Solangi
React Native developer · Karachi, Pakistan

Every app I ship ends the same way. The build is green, the store listing is written, and then I spend an evening exporting the icon into twenty different sizes because iOS wants one set, Android wants another, and the web wants six more. It is the least interesting hour of the whole project, and getting one file wrong means an upload rejection at the worst possible moment.

So here is the full list, the reason each size exists, and the two design rules that decide whether your icon still reads at 48 pixels. I built a free app icon generator that exports this entire set from one square image — it runs in your browser and never uploads your artwork — but you should still know what it's producing and why.

Start at 1024×1024, in a vector tool

Design the icon once, square, at 1024×1024, and design it in something vector-based. Every size below is a downscale of that master file. If you start from a 512-pixel raster, the App Store's 1024 slot will look soft, and soft is the one thing reviewers and users both notice instantly.

Do not round the corners yourself, and do not add a drop shadow. Both platforms mask the icon to their own shape — iOS to its superellipse, Android to whatever shape the launcher prefers — so a pre-rounded icon gets rounded twice and ends up with pale corner fringes. Export a full-bleed square.

iOS icon sizes

Since Xcode 14, you can technically ship a single 1024×1024 asset and let Xcode generate the rest. It works, and for a fresh Expo project it is what happens under the hood. But the React Native template still ships a full asset catalogue, plenty of older projects still carry one, and if you are handing files to a client's iOS team they will expect the set. Here it is, in points and the pixels those points resolve to.

PixelsPoint sizeWhere it shows up
40 × 4020pt @2xNotifications
60 × 6020pt @3xNotifications
58 × 5829pt @2xSettings
87 × 8729pt @3xSettings
80 × 8040pt @2xSpotlight search
120 × 12060pt @2xHome screen, iPhone
180 × 18060pt @3xHome screen, iPhone
76 × 7676pt @1xHome screen, iPad
152 × 15276pt @2xHome screen, iPad
167 × 16783.5pt @2xHome screen, iPad Pro
1024 × 1024App StoreThe listing itself

Two rules Apple enforces on that last one. The 1024 App Store icon must be fully opaque — no alpha channel, no transparency — and it must not contain rounded corners of your own. An icon with an alpha channel is the single most common reason a first-time upload bounces back from App Store Connect.

Newer iOS versions also let people switch their home screen to dark or tinted icons. You can supply variants for that, and it is a genuinely nice detail on a consumer app, but it is optional — the system derives something reasonable from your default icon if you skip it.

Android icon sizes, and the safe zone that trips everyone

Android is where icons go wrong, because Android does not just resize your icon — it masks it. Since adaptive icons landed, a launcher icon is two layers, a foreground and a background, on a 108 × 108dp canvas. Only the middle 72 × 72dp is guaranteed to be visible. The outer ring exists so the system can move the layers for parallax and shape effects.

  • 108 × 108dp — the full canvas you export.
  • 72 × 72dp — the area the launcher actually shows.
  • ~66dp circle — the safest zone. If a mask crops to a circle, everything outside this disappears.

In practice: put your mark inside the centre two-thirds and let the background layer bleed to the edges. I learned this the annoying way on an early build of Velocity Track, where the speedometer needle looked perfect in Android Studio's preview and got its tip sliced off on a Samsung launcher that masks to a squircle.

The raster sizes, one per density bucket, all named ic_launcher.png inside their own mipmap folder:

PixelsDensity bucketFolder
48 × 48mdpi (baseline)mipmap-mdpi
72 × 72hdpimipmap-hdpi
96 × 96xhdpimipmap-xhdpi
144 × 144xxhdpimipmap-xxhdpi
192 × 192xxxhdpimipmap-xxxhdpi
512 × 512Play Store listingUploaded in Play Console

The 512 is different from the rest: it is not bundled in the app, it is uploaded to Play Console as part of the store listing, and unlike Apple's it is a 32-bit PNG that may carry transparency. While you are in there, you will also need a 1024 × 500 feature graphic — the banner at the top of your listing. It is not an icon, but it is the other asset everybody forgets until upload day.

One more layer worth adding: a monochrome version. Android's themed icons tint a single-colour version of your mark to match the user's wallpaper. Supply a flat silhouette and your app stops being the odd one out on a themed home screen.

Web, PWA and favicon sizes

If your app has a marketing site — and it should — the same artwork has a third life in the browser. This is the set I ship on every project, including this site:

PixelsPurpose
16 × 16Browser tab favicon
32 × 32Retina tab, bookmark bar
48 × 48Desktop shortcuts, older Windows
180 × 180apple-touch-icon, iOS home screen
192 × 192PWA manifest, Android home screen
512 × 512PWA manifest, splash screen

A detail worth knowing: at 16 pixels your logo is about the width of this letter. Most brand marks do not survive that. The usual fix is a separate, simplified favicon — one letter, one shape — rather than a shrunken version of the full lockup. A modern trick is to ship an SVG favicon and let the browser scale it, with a 32-pixel PNG as fallback for the ones that do not support it.

Where the files go in a React Native project

If you are on Expo — and in 2026 you probably should be, for reasons I have written about — you do not manage the folders yourself. You point the config at three files and let the build generate the rest:

{
  "expo": {
    "icon": "./assets/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#0d6b4b"
      }
    },
    "web": { "favicon": "./assets/favicon.png" }
  }
}

icon is your 1024 square. adaptiveIcon.foregroundImage is the 1024 foreground with the safe zone respected — transparent around the mark, not a full-bleed square. The background colour fills everything behind it. On a bare React Native project you are placing files into ios/<App>/Images.xcassets/AppIcon.appiconset and the five android/app/src/main/res/mipmap-* folders by hand, which is exactly the job worth automating.

The fastest way to produce all of it

This is the part where I point at the tool I built because I was tired of doing it manually. Drop a 1024 × 1024 square into the app icon generator, pick the platforms you need, and it renders every size above with the canvas API and hands you a ZIP with the correct filenames and folder structure. Nothing leaves your browser — there is no upload, because the resizing happens on your machine.

  • iOS: the eleven sizes above, named the way an asset catalogue expects.
  • Android: five mipmap folders plus the 512 Play Store icon.
  • Web: favicons, apple-touch-icon, and the two PWA manifest sizes.

It does not design the icon for you, and it will not save an icon that fails the 48-pixel test. But it turns the last boring hour of a project into about forty seconds, which is the entire reason it exists. The rest of my free browser tools came from the same impulse.

A short checklist before you upload

  1. Master file is square, 1024 × 1024, vector-derived.
  2. No rounded corners and no drop shadow baked into the artwork.
  3. App Store 1024 is fully opaque, with no alpha channel.
  4. Android foreground keeps its mark inside the centre 66dp circle.
  5. Play Console has both the 512 icon and the 1024 × 500 feature graphic.
  6. The icon still reads as one thing at 48 pixels.

Get those six right and you will never think about icon sizes again, which is the goal. If you would rather hand the whole pipeline to someone who has done it fifty times, that is what I do for a living.

Building an app? Let’s talk.

I’m a senior React Native developer in Karachi with 50+ shipped apps. I write these posts the same way I build: no filler.

Keep reading