PWA Icon Sizes: The Complete 2026 Reference
PWA icon requirements are scattered across platform docs, W3C specs, and Stack Overflow threads. This is the consolidated reference — every size you need, what it's used for, and the manifest config that makes it work.
The required sizes
| Size | Format | Used for |
|---|---|---|
| 192×192 | PNG | Android home screen, Chrome PWA install |
| 512×512 | PNG | Android splash screen, high-DPI home screen |
| 512×512 maskable | PNG | Android adaptive icon (fills the safe zone) |
| 180×180 | PNG | iOS home screen (apple-touch-icon) |
| 167×167 | PNG | iPad Pro home screen |
| 152×152 | PNG | iPad / iPad mini home screen |
The manifest.json
{
"name": "Your App Name",
"short_name": "App",
"theme_color": "#7C3AED",
"background_color": "#0a0a0f",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/icon-512x512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}What is a maskable icon?
Android adaptive icons crop your icon into different shapes — circle, squircle, square — depending on the device. A maskable icon ensures your logo stays visible regardless of the crop by keeping the main content within the inner 80% of the image (the "safe zone").
Concretely: for a 512×512 maskable icon, keep your logo within a centered 409×409 circle. The outer ring is background that will be cropped.
iOS: the apple-touch-icon
iOS does not use the manifest icons. It reads the apple-touch-icon link tag instead:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
The 180×180 PNG should have a solid background — iOS will add rounded corners automatically but won't add a background fill.
Common mistakes
- Transparent background on iOS icon — iOS shows a black box. Use a solid background color.
- Only including 192 and 512 — You'll pass Lighthouse, but iPad and iOS home screens won't look right without 152, 167, and 180px sizes.
- Forgetting purpose: maskable — Without it, Android uses your transparent icon on a white circle — almost always looks wrong.
- Not linking the manifest — Add <link rel="manifest" href="/manifest.json" /> to your <head>.
Generate all of these in one upload
Snappicon exports 192px, 512px, and 512px maskable icons with a correctly configured manifest.json — along with favicons and OG images — from a single logo upload.
Generate for free