# App icon size: 1024 px, and every size it becomes
[Canonical HTML page](https://gradiently.design/guide/app-icon-size)
Design one big square and the stores make the rest. The catch is in the details: corners you must not round, transparency you must not use, and a safe zone that decides what survives the mask.
## The short version
- The standard app icon size to design at is a 1024×1024 pixel square, which the App Store uses directly and Xcode can scale down to every smaller size on the device.
- An App Store icon is a square, fully opaque PNG with no rounded corners, because the system applies its own rounded mask.
- Google Play asks for a 512×512 pixel, 32-bit PNG in sRGB of up to 1024 KB, as a full square: Play adds the corner radius and shadow itself.
- Android adaptive icon layers are 108×108 dp, and only the central 66×66 dp is guaranteed never to be clipped by a device's mask shape.
- A web app manifest needs at least a 192×192 and a 512×512 PNG icon, and a maskable version lets Android crop it into its own shapes.
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 Store 1024×1024: 1024 × 1024
- Google Play 512×512: 512 × 512
- Web manifest 512×512: 512 × 512
- Web manifest 192×192: 192 × 192
- Apple touch icon 180×180: 180 × 180
Every app icon is a square, so the shapes match and only the pixel count changes. Start at the biggest and work down.
## App icon sizes at a glance
| Where | Size | File rules | Corners |
| --- | --- | --- | --- |
| App Store (iPhone, iPad) | 1024×1024 px | PNG, fully opaque, no alpha channel | Square: the system masks them |
| Apple Watch | 1088×1088 px | Square layers | The system makes it a circle |
| Google Play listing | 512×512 px | 32-bit PNG, sRGB, up to 1024 KB | Square: Play rounds them |
| Android launcher (adaptive) | 108×108 dp per layer | Foreground, background, optional monochrome | The device's mask shape |
| Web app manifest | 192×192 and 512×512 px | PNG, plus an optional maskable icon | Square, or maskable with padding |
| Apple touch icon (websites) | 180×180 px | PNG, opaque | Square: iOS rounds them |
Every platform takes a square and cuts its own shape, so never round the corners yourself. Sources: Apple, Google Play, Android and web.dev.
## 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.
> **The most common rejection** If App Store validation says your icon is transparent or contains an alpha channel, open the 1024 PNG, fill any transparent pixels with your background and re-export without alpha. Rounded corners baked into the file usually cause it.
## 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.
| Adaptive icon zone | Size | What goes there |
| --- | --- | --- |
| Full layer | 108×108 dp | Background and foreground layers, edge to edge |
| Masking margin | Outer 18 dp per side | Room for the device's mask and for parallax or pulse effects |
| Safe zone | Central 66×66 dp | Never clipped by any mask: your logo must fit here |
| Logo | 48 to 66 dp | Your mark, at least 48 dp and no larger than 66 dp |
From Android's adaptive icon guide. On an xxxhdpi screen 1 dp is 4 px, so a 108 dp layer is 432×432 pixels.
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](https://web.dev/articles/add-manifest) 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.
```json
{
"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"
}
```
A `manifest.webmanifest` with the two required sizes and a separate maskable icon. Keep the maskable artwork inside the central circle, about 80% of the width.
```html
```
In the `head` of every page. The 180×180 Apple touch icon is what iPhone uses when someone adds your site to the Home Screen.
The favicon in a browser tab is the same identity at its smallest. The [favicon design](https://gradiently.design/guide/favicon-design) guide covers the 32×32 ICO and the SVG version that switches colours in dark mode, and [MDN's manifest icons reference](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons) 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 square 1024 pixel app icon with a single bold letter N centred on a full bleed blue gradient
Background to every edge, one letter in the centre. Any mask, round or square, cuts it cleanly.
A square app icon showing a two word app name, too small to read once scaled down
A full name reads at 1024 and turns to texture at launcher size. Apple's guidance also discourages text in icons.
### Avoid
- Rounded corners baked into the file
- Transparent pixels in the App Store icon
- Drop shadows, glows and bevels
- A logo that runs into the outer 18 dp
- Words, slogans and fine detail
### Do
- A square that fills every pixel
- Opaque PNG exported without alpha
- Flat artwork: the system adds lighting
- The logo inside the central safe zone
- One letter or symbol, tested at small sizes
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](https://gradiently.design/guide/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](https://gradiently.design/guide/logo-on-gradient-background) covers the contrast.
## Exporting every app icon size from one master
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. **Export the App Store PNG** 1024×1024, opaque, alpha off. Drop it into the Xcode asset catalog as a single size icon.
3. **Export the Play icon** 512×512, 32-bit PNG, sRGB, under 1024 KB. Square corners, no shadow.
4. **Split the Android layers** Background and foreground at 108 dp, plus a one colour monochrome foreground for themed icons.
5. **Make the web set** 192 and 512 PNGs, a padded 512 maskable icon and a 180×180 Apple touch icon. [PNG vs JPEG](https://gradiently.design/guide/png-vs-jpeg) explains why these stay PNG.
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](https://gradiently.design/guide/logo-sizes) kit and your [mobile app launch graphics](https://gradiently.design/guide/mobile-app-launch-graphics), so the store, the feed and the Home Screen match.
## FAQ
### What size should an app icon be?
Design at 1024×1024 pixels. That is the App Store size, and you can scale it down to 512×512 for Google Play and 192 and 512 for a web app manifest.
### Should I round the corners of my app icon?
No. iOS, Google Play and Android all apply their own corner mask to a square image. Pre-rounded corners leave a visible frame or fail App Store validation because of transparency.
### What is the Google Play icon size?
512×512 pixels, as a 32-bit PNG in sRGB of up to 1024 KB. Play adds the rounded corners and the drop shadow itself.
### What is the safe zone for an Android adaptive icon?
Layers are 108×108 dp, and the central 66×66 dp is never clipped by any device mask. Keep your logo between 48 and 66 dp inside it.
### Can an App Store icon have a transparent background?
No. App Store validation rejects icons with transparency or an alpha channel, so fill the whole square and export the PNG without alpha.
### What icon sizes does a PWA need?
At least a 192×192 and a 512×512 PNG in the web app manifest. Add a maskable 512 icon so Android can crop it to its own shape.