Which icons a web app actually needs
Browsers are specific about this, and getting it wrong is the most common reason an install prompt never appears. The manifest must reference at least a 192×192 and a 512×512 PNG; Chrome uses the first for the home-screen icon and the second for the splash screen it generates while your start page loads. Everything else is optional polish.
| Icon | Size | Where it is used | Required? |
|---|---|---|---|
| Manifest icon | 192×192 | Android home screen, app switcher, install banner | Yes |
| Manifest icon | 512×512 | Generated splash screen; Play listing when wrapped as a TWA | Yes |
| Maskable variants | 192 and 512, purpose: "maskable" | Lets Android crop to circle, squircle or rounded square without clipping | Strongly recommended |
| apple-touch-icon | 180×180 | iPhone and iPad home screen (Safari ignores the manifest icons) | Yes, for iOS |
| Favicon | 32×32, 16×16 (or one SVG) | Browser tab, bookmarks | Recommended |
| Extra manifest sizes | 72, 96, 128, 144, 152, 384 | Older Android launchers and some desktop installs pick the closest match | Optional |
The maskable safe zone, explained once
Android launchers apply a mask to app icons - Pixel phones use a circle, Samsung uses a squircle, others a rounded square. A "maskable" icon is one designed to be cropped: the important content sits inside a circle whose diameter is 80% of the image width, and the remaining 10% on each side is background colour that can be safely cut away. If you hand Android a logo that fills the whole square, the corners and often the edges of letters are lost.
The resizer's maskable preview shows your image inside the circle mask so you can see what survives. If the logo touches the edge, add padding before uploading - or upload a version with a solid background and the logo at about 60-70% of the width. Do not mark a non-padded icon as maskable in the manifest; Chrome will trust the flag and crop it.
Why iOS needs its own icon
Safari does not read manifest icons for the home screen. It looks for a <link rel="apple-touch-icon"> tag in the page head, and if none exists it uses a screenshot of the page - which is the blurry square you have seen on badly configured sites. Export the 180×180 version here and add:
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png">iOS applies its own rounded-corner mask and does not support transparency on touch icons - transparent areas turn black. Use a solid background.
Android launcher densities, if you also ship an APK
A native Android package carries launcher icons per screen density: mdpi 48, hdpi 72, xhdpi 96, xxhdpi 144, xxxhdpi 192, plus the 512×512 hi-res icon for the Play listing. The ZIP includes exactly that set, plus the adaptive-icon layers and XML. If you build the Android package with our app builder this is handled for you; the set is here for people using Android Studio or other tooling.
Preparing the source image
- Start from at least 512×512; 1024×1024 gives cleaner downscaling.
- Use PNG for the upload. JPEG artefacts become visible at small sizes.
- Avoid thin lines and small text - at 48 px they disappear. A single bold shape or letterform reads best.
- Check contrast against both light and dark launcher backgrounds; many phones now default to dark themes.
Once the icons are exported, the PWA Builder writes the manifest entries for you, or copy this block and adjust paths:
"icons": [
{ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "/icons/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]