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.
Don't want to create 19+ 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 | Android adaptive icon (safe zone: 75%) | Yes |
| 512×512 maskable | Android adaptive icon, 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 (Android Adaptive)
Android 8.0+ uses adaptive icons — your icon is placed inside a shape (circle, squircle, rounded square) that varies by device launcher. Maskable icons have a safe zone of 80% of the icon area. Keep all critical design elements within the central 80% to avoid being clipped.
Maskable Icon Safe Zone Rules
- Full image: 192×192px or 512×512px
- Safe zone radius: 40% of icon width from center (for 192px: keep content within a 154px circle 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 |
|---|---|
| 16×16 | Favicon, browser tab |
| 32×32 | Favicon retina |
| 57×57 | iPhone (non-Retina, iOS 6) |
| 72×72 | iPad (non-Retina, iOS 6) |
| 76×76 | iPad (non-Retina) |
| 114×114 | iPhone Retina (iOS 6) |
| 120×120 | iPhone Retina (iOS 7+) |
| 144×144 | iPad Retina (iOS 6) |
| 152×152 | iPad Retina (iOS 7+) |
| 167×167 | iPad Pro |
| 180×180 | iPhone (iOS 8+), apple-touch-icon |
| 512×512 | iTunes |
| 1024×1024 | App Store submission |
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" 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 |
|---|---|
| 2048×2732 | iPad Pro 12.9" (landscape) |
| 1668×2388 | iPad Pro 11" |
| 1536×2048 | iPad (9th gen, landscape) |
| 1125×2436 | iPhone X / XS |
| 1242×2688 | iPhone XS Max |
| 828×1792 | iPhone XR / 11 |
| 1170×2532 | iPhone 12 / 13 / 14 |
| 1284×2778 | iPhone 12 Pro Max |
| 1290×2796 | iPhone 14 Pro Max / 15 Pro Max |
| 750×1334 | iPhone 8 / SE 2nd gen |
| 1080×1920 | Android (1080p) |
| 720×1280 | Android (720p) |