App icon size: 1024 px, and every size it becomes

The app icon size to design at is 1024×1024 pixels. That one square is the App Store icon, and it scales down cleanly to every other place your icon appears. Google Play wants 512×512 for its store listing, Android builds launcher icons from 108×108 dp layers, and a web app manifest needs 192×192 and 512×512 PNGs. Design once at 1024, as a full square with no rounded corners, and export the rest from it.

App icon sizes at a glance

iOS app icon size: one 1024 px square

Apple's specification lists the app icon layout for iPhone and iPad as a 1024×1024 px square. Since Xcode 14 you can give the asset catalog that single image and let it generate every smaller size for the Home Screen, Spotlight, Settings and notifications. You no longer draw a 60 pt or 29 pt version by hand.

• Square, not rounded. iOS applies a rounded mask that matches the curve of the screen and other interface shapes.
• Fully opaque. App Store validation rejects an icon with transparency or an alpha channel. Export the PNG with alpha turned off.
• No baked effects. Apple asks you to leave out drop shadows, bevels, glows and specular highlights, because the system adds its own lighting to icon layers.
• Centred content. Keep the important shape in the middle so the corner mask never clips it.
• Appearance variants. People can show icons as default, dark, clear or tinted. Apple's Icon Composer, included with Xcode, builds those variants from layers.

Android app icon size: 512 for Play, 108 dp on the device

Android has two icons that people mix up. The Google Play icon is the 512×512 image on your store listing. The launcher icon is the adaptive icon inside your app, built from layers that each device crops into its own shape: a circle on one phone, a squircle on another.

Google Play's specification is precise: 512×512 px, 32-bit PNG, sRGB, at most 1024 KB, a full square with no shadow. Play rounds the corners to a radius of 30% of the icon size and adds its own drop shadow. A transparent icon shows Play's background colour through it, so fill the whole square.

Since Android 13 people can theme their icons, using a monochrome layer you provide. Supply your own single colour silhouette so a themed icon stays recognisable.

Web app and PWA icon sizes

A web app that people can install needs icons in its manifest. For Chromium browsers, web.dev says you must provide at least a 192×192 and a 512×512 pixel icon, and the browser scales them for the device. Add a maskable icon too, so Android can crop it like a native adaptive icon instead of shrinking it onto a white plate.

{
  "name": "Northwind Notes",
  "short_name": "Northwind",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#1e3a8a",
  "background_color": "#1e3a8a",
  "display": "standalone"
}

<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

The favicon in a browser tab is the same identity at its smallest. The favicon design guide covers the 32×32 ICO and the SVG version that switches colours in dark mode, and MDN's manifest icons reference lists every field.

How to design an app icon that survives every mask

One 1024 square has to work as a store tile, a launcher circle and a notification speck. That rewards one bold idea on a background that fills every pixel.

A gradient ground gives an icon depth without detail, and it survives downscaling better than a pattern. Keep the change in lightness clear and the hue confident, as app icon gradient explains. If the icon will sit beside your social profiles and launch graphics, use the same ground everywhere: logo on gradient background covers the contrast.

Exporting every app icon size from one master

1. 1

   Design the 1024×1024 master

   Full square, background to every edge, logo inside the central 61% (66 of 108 dp) so it is safe for Android too.

2. 2

   Export the App Store PNG

   1024×1024, opaque, alpha off. Drop it into the Xcode asset catalog as a single size icon.

3. 3

   Export the Play icon

   512×512, 32-bit PNG, sRGB, under 1024 KB. Square corners, no shadow.

4. 4

   Split the Android layers

   Background and foreground at 108 dp, plus a one colour monochrome foreground for themed icons.

5. 5

   Make the web set

   192 and 512 PNGs, a padded 512 maskable icon and a 180×180 Apple touch icon. PNG vs JPEG explains why these stay PNG.

6. 6

   Check them small

   Look at each icon at 48 px next to other apps, in light and dark. If you cannot find it in a second, simplify.

In Gradiently you can set a custom 1024×1024 size in the Studio and lay your letter over a Mark, a living gradient ground that nobody else can export once you claim it. Exports come out as PNG; Pro removes the watermark and exports at full size. Use the same look for your logo sizes kit and your mobile app launch graphics, so the store, the feed and the Home Screen match.