Progressive Web Apps need their own icon set, separate from native Android/iOS apps: favicons for browser tabs, an Apple touch icon for "Add to Home Screen" on iOS, and manifest icons for Android's "Add to Home Screen" and app drawer.
Get this wrong and your PWA either shows a generic gray icon or a blurry, stretched logo when installed. Here's everything you need, generated free with the GMC Tools App Icon Generator.
---
The PWA Icon Checklist
| File | Size | Used For |
|---|---|---|
| `favicon-16x16.png` | 16×16 | Browser tab (small displays) |
| `favicon-32x32.png` | 32×32 | Browser tab (standard) |
| `apple-touch-icon-180.png` | 180×180 | iOS "Add to Home Screen" |
| `icon-192.png` | 192×192 | Android home screen / `manifest.json` |
| `icon-512.png` | 512×512 | Android splash screen / app drawer / `manifest.json` |
---
Wiring Icons into `manifest.json`
Your web app manifest needs an icons array referencing the generated files:
\\\`json
{
"name": "Your App",
"short_name": "App",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
\\\`
The "purpose": "any maskable" hint tells Android it's safe to crop the icon into a circle or rounded square — which is exactly why the GMC Tools generator lets you preview your icon in circle and rounded shapes before exporting, so you know it'll still look right after Android masks it.
---
Wiring the Apple Touch Icon and Favicons
In your HTML <head>:
\\\`html
<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-180.png">
\\\`
iOS uses the apple-touch-icon specifically — without it, "Add to Home Screen" falls back to a screenshot of your page, which looks unprofessional.
---
Generating Everything at Once
pwa/ folder, named exactly as shown above---
Frequently Asked Questions
Do I need a separate `favicon.ico` file?
Modern browsers support PNG favicons via <link rel="icon">, but for maximum legacy compatibility you can additionally convert favicon-32x32.png to .ico format using any free converter.
What does "maskable" mean for the 512px icon?
It means Android is allowed to crop the icon into different shapes (circle, squircle, etc.) depending on the device's icon theme. Use the GMC Tools shape preview to check your logo still looks good when cropped to a circle.
Can the same icon set work for both PWA and native apps?
Yes — generate Android, iOS, and PWA together in one pass from the same source image, and you'll have a consistent icon across web, Android, and iOS.
Why does my PWA show a blank/gray icon after install?
Usually a missing or incorrectly-sized icon-192.png/icon-512.png reference in manifest.json, or a path mismatch between the manifest and where the files actually live.