PWA Icon Sizes: Complete Reference 2026
Every icon size you need for a Progressive Web App in 2026 — with exact pixel dimensions, purpose explanations, and a ready-to-copy manifest.json. Covers PWA, Android adaptive, iOS App Store, and splash screens.
Quick Answer: What Sizes Do I Need?
For a complete PWA that works on Android, iOS, and desktop, you need 10 sizes in manifest.json (including 2 maskable), 13 iOS App Store sizes, and optionally splash screens for full-screen launch UX.
Shipped as files rather than sizes, a complete set is 30: 24 square PNGs (the manifest and iOS sizes above, plus 16, 32, 48, 256 and 1024), 2 maskable variants, a Windows tile, favicon.ico, favicon.svg, and a Safari pinned-tab SVG.
Don't want to create 30 files manually? Imagcon generates all of them from a single text prompt — free.
1. PWA Manifest Icons (Required)
These go in your manifest.json. The 192×192 and 512×512 sizes are mandatory for Chrome's installability check. Maskable versions are strongly recommended for Android.
| Size | Purpose | Required |
|---|---|---|
| 72×72 | Android home screen (legacy) | Yes |
| 96×96 | Android home screen | Yes |
| 128×128 | Chrome Web Store | Yes |
| 144×144 | Windows tiles, IE pinned sites | Yes |
| 152×152 | iPad (non-Retina) | Yes |
| 192×192 | Android home screen (required) | Yes |
| 384×384 | Android splash screen | Yes |
| 512×512 | Install prompt, splash screen (required) | Yes |
| 192×192 maskable | PWA maskable (W3C 40% radius safe zone) | Yes |
| 512×512 maskable | PWA maskable, large | Yes |
2. manifest.json Template
Place this file at the root of your /public folder (Vite, CRA) or /static (Next.js). Reference it with <link rel="manifest" href="/manifest.json"> in your HTML.
{
"name": "Your App Name",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{ "src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" },
{ "src": "/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" },
{ "src": "/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" },
{ "src": "/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" },
{ "src": "/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" },
{ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
{ "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icons/icon-192x192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/icons/icon-512x512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}3. Maskable Icons (PWA / Android launcher)
Android launchers crop PWA icons into circles, squircles, and rounded squares. W3C maskable icons define a safe zone: a circle with radius 40% of icon width, centered. Keep critical artwork inside that circle. Imagcon exports opaque maskable PNGs with content fitted to a ~56% center square derived from that rule — separate from full-bleed any icons at 192 and 512.
Maskable Icon Safe Zone Rules
- Full image: 192×192px or 512×512px
- Safe zone: circle, radius 40% of icon width (for 192px: ~77px radius / ~154px diameter centered)
- Background fills the full image — no transparency
- Set
"purpose": "maskable"in manifest.json
4. iOS App Store Icon Sizes
If you're submitting to the Apple App Store or supporting iOS PWA home screen icons, you need these sizes. The most important for PWA use is 180×180 (apple-touch-icon).
| Size | Usage Context |
|---|---|
| 20×20 | Notifications (1x) |
| 29×29 | Settings (1x) |
| 40×40 | Spotlight search (1x) |
| 58×58 | Settings @2x |
| 60×60 | Notifications @3x |
| 76×76 | iPad home screen (non-Retina) |
| 80×80 | Spotlight search @2x |
| 87×87 | Settings @3x |
| 120×120 | iPhone home screen @2x |
| 152×152 | iPad home screen @2x |
| 167×167 | iPad Pro home screen |
| 180×180 | iPhone home screen @3x — apple-touch-icon |
| 1024×1024 | App Store listing + Dark/Tinted masters |
5. Favicon & HTML Meta Tags
Add these tags to your index.html <head> to ensure icons appear in browser tabs, bookmarks, and iOS home screens.
<!-- In your index.html <head> -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#000000">6. Splash Screen Sizes (iOS & Android)
Splash screens appear when your PWA launches in standalone mode. iOS requires per-device images linked via <link rel="apple-touch-startup-image">. Android TWA splash screens are configured in the manifest or via the Trusted Web Activity setup.
| Size (px) | Device |
|---|---|
| 1320×2868 | iPhone 16 / 17 Pro Max |
| 1260×2736 | iPhone Air |
| 1206×2622 | iPhone 16 / 17 Pro |
| 1290×2796 | iPhone 16 Plus / 15 Pro Max |
| 1179×2556 | iPhone 16 / 15 Pro |
| 1170×2532 | iPhone 14 / 16e |
| 2048×2732 | iPad Pro 12.9" |
| 1668×2388 | iPad Pro 11" |
| 1536×2048 | iPad 9.7" |
| 1125×2436 | iPhone X / XS |
| 750×1334 | iPhone 8 / SE |