PWA Icons: Make Your App Installable
The install prompt is not a design choice, it is a checklist. Miss the 192 or the 512 icon and the browser silently refuses to offer the install. Here is the exact set.
The install prompt is gated on icons
A browser only offers to install a PWA when the manifest meets a set of requirements, and icons are one of them. Specifically the icons array must include at least a 192x192 and a 512x512 PNG. Miss either and the prompt never fires, with no error a user would notice.
The 192 is the launcher icon. The 512 feeds the splash screen and higher-density displays. Both must be real PNGs at those exact dimensions, not one image stretched by CSS.
Make it installable
- 1
Export the two required PNGs
Create icon-192.png at 192x192 and icon-512.png at 512x512. These are the two the install prompt checks for.
- 2
Add a maskable version
Export a 512x512 with your mark centred inside the safe zone and padding around it, then mark it purpose: maskable so Android can crop it to a circle, squircle, or rounded square.
- 3
List them all in the manifest
Put every icon in the manifest icons array with its src, sizes, type, and purpose. See the code below for the exact shape.
- 4
Link the manifest and the apple-touch-icon
Add <link rel="manifest" href="/manifest.json"> and a separate <link rel="apple-touch-icon"> in your head. iOS reads the second one, not the manifest.
- 5
Verify the prompt
Open your site in Chrome, check the install control appears, and confirm the manifest has no errors in the browser dev tools application panel.
The manifest icons array
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}The 192 and 512 with purpose any satisfy the install requirement. The maskable entry lets Android shape the icon without clipping your mark.
Why maskable is separate
Android launchers crop icons to whatever shape the device theme uses. A normal icon that fills the full square gets its corners chopped off. A maskable icon has your mark centred in a safe zone with padding, so the launcher can crop the edges without touching the important part.
You still keep a purpose any icon alongside the maskable one. Surfaces that do not mask (the tab, the task switcher) use the any version so it is not left with extra padding.
Frequently asked questions
Why is my PWA install prompt not showing?
The most common icon cause is a missing 192x192 or 512x512 PNG in the manifest icons array. Both are required. Also check the manifest is linked and served, and the app is on HTTPS with a service worker.
What icon sizes does a PWA need?
A 192x192 and a 512x512 PNG in the manifest are required for the install prompt. Add a 512x512 maskable version for Android and a 180x180 apple-touch-icon for iOS.
Do I need a maskable icon?
For Android, yes. Without one the launcher crops your full-bleed icon and cuts off the corners. A maskable icon keeps your mark inside a safe zone so it survives any shape.
Does the manifest set the iOS home screen icon?
No. iOS ignores the manifest icons for Add to Home Screen. It uses the apple-touch-icon link tag, so you need one in your head even if the manifest is complete.