App Icon Sizes for iOS, Android and PWAs

App Icon Sizes for iOS, Android and PWAs

Draw one square master and export it differently per platform. Apple's current guidance for iOS, iPadOS and macOS is a 1024 x 1024 pixel square, with the system applying the rounded corners. Android's adaptive icons use two 108 x 108 dp layers with a 66 x 66 dp safe zone, plus the Google Play listing icon at 512 x 512 pixels. A progressive web app needs 192 and 512 pixel icons in its manifest to meet Chrome's installability criteria, and a maskable version should keep its logo inside a circle whose radius is 40 percent of the icon width.

Those numbers come from the platform documentation we read on October 22, 2026, and they change. Apple's page lists revision dates, Android's adaptive icon rules gained user theming in recent releases, and the web guidance on maskable icons is several years old. The Android arithmetic is simple once you know the ratio: a 108 dp layer is 108 px at mdpi and 432 px at xxxhdpi, because the density buckets scale 3:4:6:8:12:16. For browser tab icons and the favicon files a website needs, use our favicon sizes and formats guide instead; this page covers app icons.

Why one set of sizes does not exist

People ask for "the" app icon size, and there is no single answer for two reasons.

First, each platform decides the shape. Apple says that in iOS, iPadOS and macOS, "icons are square, and the system applies masking to produce rounded corners." In watchOS and visionOS the system applies circular masking. On Android, "each device OEM must provide a mask, which the system uses to render all adaptive icons with the same shape", and Android's own documentation shows circles and squircles. For a PWA, the browser or operating system crops a maskable icon to whatever shape it uses.

Second, the platforms have moved from flat images to layers. Apple's guidance now describes layered icons with "a background layer and one or more foreground layers", and Android's adaptive icons have separate foreground and background layers and, optionally, a monochrome layer. A layered design needs separate artwork per layer, not just one square PNG at many sizes.

The practical consequence is that the useful deliverable is a vector master with generous margins, plus per-platform exports. The sections below say what each platform wants.

Apple platforms

The Apple Human Interface Guidelines page "App icons" includes a table of layout sizes. We read it on October 22, 2026, and its change log lists its most recent entry as June 8, 2026 ("Refined guidance for Liquid Glass").

Apple adds: "The system automatically scales your icon to produce smaller variants that appear in certain locations, such as Settings and notifications." That sentence is why you do not export a ladder of small PNGs for Apple's Home Screen icon the way older guides said; you supply the large layout and the system derives the rest.

Layers, not a flattened picture

Apple says you can provide a flattened image, "layers give you the most control over how your icon design is represented." For iOS, iPadOS, macOS and watchOS, you craft foreground layers in a design tool, import them into Icon Composer (a tool included with Xcode), define the background layer there, adjust placement and effects, "annotate for default, dark, and mono appearance variants," preview across system versions, and export for Xcode. For tvOS and visionOS you add layers to an image stack in Xcode instead.

Practical rules from the page:

• Square, unmasked layers. "Produce appropriately shaped, unmasked layers. The system masks all layer edges." Providing layers with pre-defined masking "negatively impacts specular highlight effects and makes edges look jagged." Do not draw the rounded corner yourself.
• Keep content centred. "Keep primary content centered to avoid truncation when the system adjusts corners or applies masking." Apple points to the grids in its icon production templates in the Apple Design Resources.
• Prefer vector layers. "Prefer vector graphics when bringing layers into Icon Composer. Unlike raster images, vector graphics (such as SVG or PDF) scale gracefully." For mesh gradients and raster artwork, prefer PNG as a lossless format. Outline artwork and convert text to outline.
• Backgrounds. "If you do import a background layer, make sure it's full-bleed and opaque." Icon Composer supports solid colours and gradients for backgrounds, so most icons do not need a custom background image. Avoid black backgrounds: "Lighten a black background so the icon doesn't blend into the display background."
• Clean edges. "Avoid soft and feathered edges on foreground layer shapes," so system highlights and shadows look right.
• Let the system draw effects. Apple says there is no need to include "specular highlights, drop shadows between layers, beveled edges, blurs, glows, and other effects," because custom effects are static and can conflict with the system's dynamic ones.
• Text only when essential. Text in icons "doesn't support accessibility or localization, is often too small to read easily, and can make an icon appear cluttered."
• Illustrations over photographs, and no replicas of Apple hardware. Apple says photos work badly across appearances and sizes, and that Apple products are copyrighted and cannot be reproduced in app icons.

Appearances: default, dark, clear and tinted

People on iOS, iPadOS and macOS can choose whether Home Screen icons look default, dark, clear or tinted. You can supply variants and "the system automatically generates variants you don't provide." Apple's advice is to keep the core features the same across them, to use the light icon as the basis for the dark one, to choose colours that complement the default, and to avoid "excessively bright images". It also says "Color backgrounds generally offer the greatest contrast in dark icons." The consequence for production: design the icon as foreground shapes that can survive being recoloured to one tint, not as a colourful illustration that depends on its own palette.

Colour spaces

Apple lists three: sRGB (colour), Gray Gamma 2.2 (grayscale) and Display P3, with Display P3 listed as wide-gamut colour "in iOS, iPadOS, macOS, tvOS, and watchOS only." If you export from Figma, set the colour profile deliberately; Figma's export formats and settings page lists the three profile options it offers.

What Apple's page does not tell you

The HIG page gives the layout size and the principles. It is not an App Store submission checklist. Technical requirements such as asset catalogue formats, transparency rules for the store icon, and file size limits live in Apple's developer documentation for Xcode and App Store Connect, which we did not read for this guide. The one store rule we could source, from Apple's upload validator, is the opaque icon in the checklist below. Check the rest before you submit.

Android

Android's "Adaptive icons" documentation, which shows "Last updated 2026-10-19 UTC" at the foot of the page we read, defines the layers and the safe zone.

Adaptive icon geometry

Requirements as stated:

• Provide two layers for the colour version, a foreground and a background. Layers can be vectors or bitmaps, "though vectors are preferred."
• To support user theming, provide a single monochrome layer.
• "Size all layers to 108x108 dp."
• Use clean edges. "The layers must not have masks or background shadows around the outline of the icon."
• "Use a logo that's at least 48x48 dp. It must not exceed 66x66 dp, because the inner 66x66 dp of the icon appears within the masked viewport."
• "The outer 18 dp on each of the four sides of the layers is reserved for masking and to create visual effects such as parallax or pulsing."

Another line gives the safe zone: "The 66x66 safe zone depicted is the area that is never clipped by a shaped mask defined by an OEM."

Our arithmetic on those numbers: 108 minus two margins of 18 leaves 72 dp, and the guaranteed-unclipped zone is the 66 dp square inside it. So, from outermost to innermost: the full layer is 108 dp, the area that can show under a mask is up to 72 dp, and only the central 66 dp is never clipped. The documentation states the 18 dp margin and the 66 dp safe zone; the 72 dp figure is our subtraction.

Pixel sizes: converting dp

Layers are specified in dp, but your export tool works in pixels. Android's density documentation gives the scale between densities as a 3:4:6:8:12:16 ratio and uses a 48-pixel image at medium density as its example, which scales to 36, 48, 72, 96, 144 and 192 pixels. That ratio gives the multipliers 0.75, 1, 1.5, 2, 3 and 4 relative to mdpi. Applying those to the 108 dp layer and the 66 dp safe zone gives this table, which is our calculation from the documented figures:

At 0.75x the safe zone is 49.5 pixels, a half pixel, which is one reason vector layers are preferred over bitmaps. A vector drawable scales cleanly, and you only provide bitmaps when you have a reason to.

The monochrome layer and themed icons

Android's page says that starting with Android 13 (API level 33), users can theme their adaptive icons: "If a user enables themed app icons in their system settings, and the launcher supports this feature, the system uses the coloring of the user's chosen wallpaper and theme to determine the tint color of the app icons for apps that have a monochrome layer." Starting with Android 16 QPR 2, "Android automatically themes app icons for apps that don't provide their own."

The page lists when a themed icon is not shown: the user has not enabled themed icons, the app has no monochrome icon and the device runs a version earlier than Android 16 QPR 2, or the launcher does not support themed icons. So a monochrome layer is optional but worthwhile if you want control over how your icon appears when themed. The monochrome layer, like the foreground, should be a clean single-colour shape inside the safe zone. Apple's tinted appearance asks for the same kind of design, which is why one set of foreground shapes can serve both.

Declaring the icon

Adaptive icons are specified with the android:icon attribute in the manifest, and an optional android:roundIcon for launchers that use circular icons. You define the icon in res/mipmap-anydpi-v26/ic_launcher.xml using an <adaptive-icon> element with <background>, <foreground> and <monochrome> children, each pointing to a drawable. The documentation's example uses the same drawable for foreground and monochrome and shows an inset of 18 dp on each side to place a shape inside the visible area.

Legacy icons and densities

Android's Studio documentation says legacy launcher icons "are intended for use on devices running Android 7.1 (API level 25) or lower, which don't support adaptive icons." Image Asset Studio generates the legacy files in res/mipmap-<density>/ directories and "also creates a 512 x 512 pixel image that's appropriate for the Google Play store." The density documentation advises putting app icons in mipmap directories, not drawable directories, because "some app launchers display your app icon as much as 25% larger than what's called for by the device's density bucket." Whether you still need legacy bitmaps depends on your minimum supported Android version.

The Google Play listing icon

Google Play asks for a separate, higher-resolution icon for the store listing. Play Console Help states the requirements in its preview assets section: a 32-bit PNG (with alpha), 512 pixels by 512 pixels, maximum file size 1024 KB, meeting Google Play's icon design specifications. The page adds that the app icon "does not replace your app's launcher icon but should be a higher-fidelity, higher-resolution version." We did not read the separate icon design specification page, so we describe no rules from it beyond the existence of that requirement. The store listing's metadata policy also says misleading symbols in app icons are not allowed and that "graphic violence prominently depicted in app icons" is an example of inappropriate content.

Progressive web apps

For a PWA, the icons live in the web app manifest, and two different documents set the rules.

The installability minimum

web.dev's installability criteria (page last updated 2024-09-19) say the manifest must include "icons - must include a 192px and a 512px icon", along with a name, start_url, display mode and no prefer_related_applications set to true. Chrome lists additional criteria around HTTPS and user engagement on the same page, and says other browsers have similar but not identical criteria.

The icons member

MDN documents the icons array in the manifest. Each object needs src; sizes is optional but recommended for raster formats (written as 192x192, with several sizes separated by spaces, or any for vector formats); type is optional and improves performance; and purpose controls use. The purpose keywords are:

• any: the default, usable in any context.
• maskable: designed "with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away."
• monochrome: a solid-fill icon where "a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill."

You can specify several keywords, for example "monochrome maskable".

The maskable safe zone

web.dev's article on maskable icons (last updated 2019-12-19) says maskable icons "need to support a variety of shapes", so you "supply an opaque image with some padding that the browser can crop to the required shape and size". The specification's "minimum safe zone" requires the important parts of the icon to sit "within a circular area in the center of the icon with a radius equal to 40% of the icon width. The outer 10% edge might be cropped on some platforms."

Our arithmetic from that rule:

The article also explains why it matters. Icons that are not maskable get a white background on Android. In its words: "Icons that don't use this format have white backgrounds" and "Transparent PWA icons appear inside white circles on Android." It cautions against setting one icon to both any and maskable: "Using maskable icons as any icons adds unnecessary padding, making the core icon smaller." The safer pattern is two separate files, one for any and one for maskable. Chrome DevTools, under Application > Icons, has an option to show only the minimum safe area so you can check your logo fits.

A manifest that follows these points looks like this (paths are examples):

{
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Notice that it provides the 192 and 512 icons Chrome requires, plus a separate maskable file. You can add a monochrome icon where you want control over themed rendering.

One master, many exports

Designing everything at once is easier than it sounds if you set up the master to satisfy the strictest geometry.

1. Draw the symbol as vector shapes, centred, on a transparent square. Keep it simple; Apple says "embrace simplicity", and fine detail disappears at small sizes.
2. Fit the symbol inside the smallest safe zone you must satisfy. The Android 66/108 zone is 61.1 percent of the layer width (66 divided by 108). The PWA maskable circle is 80 percent of the width in diameter. A symbol that fits inside a circle of 61 percent of the canvas satisfies both, though it will look small on platforms that allow more room. You may choose a larger symbol on Apple, where the system masks a rounded rectangle, and accept a different crop on other platforms.
3. Make the background a separate full-bleed layer. Apple wants a full-bleed opaque background layer if you import one. Android needs a background layer. The maskable PWA icon needs an opaque full-bleed image.
4. Make a one-colour version of the foreground. It serves Apple's tinted and mono appearances and Android's monochrome layer.
5. Export per platform. Apple: layers into Icon Composer (or a flat 1024 x 1024 image if you choose). Android: vector drawables or 108 dp layer bitmaps at each density, plus the 512 x 512 Play icon. PWA: 192, 512 and maskable 512 PNGs.
6. Test at the small end. View the exports at the sizes people see: a notification, a settings list, a home screen. If the symbol loses its meaning, simplify it.

If you use Figma for the master, set fixed-width exports such as 1024w and 512w rather than multipliers, so the pixel size is explicit. Figma's export formats and settings page documents the scale syntax. Run SVG layers through an optimiser before they go into a project; the SVG optimisation guide describes the safe steps. For general rules about drawing small icons that stay legible, see icon design principles.

Checklist before you submit

The Apple opacity row comes from the validator's error text, not from the HIG page. An Apple Developer Forums thread from January 2018 (Xcode 9.2) quotes the error "Invalid App Store Icon. The App Store Icon in the asset catalog in 'abc.app' can't be transparent nor contain an alpha channel." The same thread quotes older Apple documentation (QA1686) saying icons "may include an alpha channel but should not include any transparent regions." Because the two statements differ, export the App Store icon flattened onto an opaque background with no alpha channel at all. Apple's current App Store Connect pages did not give us a sentence to cite on this, so check the validator's message when you upload.

Why icons look wrong on a real device

• Drawing the rounded corners into the artwork. Apple and Android both mask for you; pre-masked layers look wrong.
• Putting the logo in the outer margin. Android reserves the outer 18 dp per side, and maskable PWA icons may lose the outer 10 percent.
• Exporting a transparent PNG as the PWA icon. On Android it appears inside a white circle.
• Using one file for both any and maskable. web.dev says this adds unnecessary padding.
• Skipping the 192 and 512 sizes. Chrome's criteria require both.
• Relying on a flattened icon for dark and tinted appearances. The system generates variants you do not provide, and they may look weaker than a designed one.
• Shipping a black background on Apple platforms. Apple says to lighten it so the icon does not blend into the display.
• Treating the favicon as the app icon. Browser tabs and app icons have different sizes and rules; see our favicon guide.

Size questions, answered

What size should an iOS app icon be?

Apple's current table lists a 1024 x 1024 pixel layout size for iOS, iPadOS and macOS icons. The system scales it down for other locations, and you can supply layered artwork through Icon Composer instead of a flattened file.

What size is the Android app icon?

Adaptive icon layers are 108 x 108 dp, with a 66 x 66 dp safe zone and the outer 18 dp per side reserved for masking and effects. The Google Play listing icon is a separate 512 x 512 pixel, 32-bit PNG with a maximum size of 1024 KB.

What sizes does a PWA icon need?

Chrome's installability criteria require a 192 px and a 512 px icon in the manifest. For a good result on Android, add a separate maskable icon with the logo inside the central circle of radius 40 percent of the icon width.

What is a maskable icon?

An icon designed so that the platform can crop it to its own shape. The manifest purpose value maskable marks it, and the content outside the safe zone may be masked away.

Do I still need legacy Android icons?

Android's documentation says legacy launcher icons are for Android 7.1 (API level 25) and lower, which do not support adaptive icons. If your minimum version is higher, adaptive icons cover your users.

Can I use text in my app icon?

Apple says to include text only when essential, because text in icons does not support accessibility or localisation and can be too small to read. Android's guidance asks for a clean logo within the safe zone. A one-letter mark is the usual compromise.

Can I use photographs in an icon?

Apple advises illustrations over photos, because photos hold detail that does not survive small sizes or different appearances. Android and web guidance say little on this, but the same small-size problem applies.

Platform pages read for this guide

All read on October 22, 2026.

• Apple, Human Interface Guidelines: App icons (layout sizes table, layers, appearances, colour spaces; change log latest entry June 8, 2026). We read the page's published data file because the page renders client-side.
• Android Developers, Adaptive icons (108 dp layers, 66 dp safe zone, 18 dp margin, monochrome layer, themed icons; "Last updated 2026-10-19 UTC").
• Android Developers, Support different pixel densities (3:4:6:8:12:16 ratio, 48 px example, mipmap advice; last updated 2026-03-05) and Create app icons with Image Asset Studio (legacy launcher icons for API 25 and lower; 512 x 512 Play image).
• Google Play Console Help, Add preview assets to showcase your app (app icon: 32-bit PNG, 512 x 512 px, 1024 KB maximum) and Metadata policy.
• web.dev, Installable PWA criteria (192 and 512 px icons; last updated 2024-09-19) and Maskable icons (40 percent radius safe zone; last updated 2019-12-19).
• MDN, Web app manifest icons (sizes, type, purpose values; page last modified June 23, 2025).
• Our own arithmetic: the dp to pixel table, the 72 dp visible area, the 61.1 percent and 80 percent proportions and the PWA safe-circle sizes. Apple Developer Forums, Invalid App Store Icon, can't be transparent nor contain an alpha channel (community thread, January 2018; quotes the validator error and QA1686). Not read: Apple's App Store Connect requirements pages, Google's Play icon design specification page, and the W3C manifest specification text.

From master file to shipped build

A companion website needs a different set of files with their own rules; our favicon sizes and formats guide covers them. Before you hand the master to a developer, run the shapes through the SVG optimisation guide so the vector layers are small and clean. For the wider choice between vector and raster formats across a project, the image formats guide is the hub for this topic.