PWA Manifest Generator
Fill in the fields, drop in one square icon, and download a manifest.webmanifest with every icon size Chrome, Android and iOS look for.
Checks
- name is required — it is what the install prompt shows.
- short_name is required — it labels the home screen icon.
manifest.webmanifest
{
"name": "",
"short_name": "",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"lang": "en",
"icons": [
{
"src": "/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-180x180.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Add to the head section
<link rel="manifest" href="/manifest.webmanifest" /> <meta name="theme-color" content="#000000" /> <link rel="apple-touch-icon" href="/icons/icon-180x180.png" />
Icon preview
Upload an icon to generate the set
What a web app manifest does
The manifest is the JSON file that turns a website into something installable. Chrome reads it to decide whether to offer the install prompt; Android reads it for the launcher icon and splash screen; iOS reads part of it for the home screen.
What Chrome requires before it will offer installation
- A linked manifest that is served as JSON
- Both name and short_name
- Icons at 192×192 and 512×512
- A display mode of standalone, fullscreen or minimal-ui
- A start_url that loads while offline
- The site served over HTTPS
Icon sizes and what uses them
| Size | Used by | Note |
|---|---|---|
| 192×192 | Chrome, Android — required | Install prompt |
| 512×512 | Chrome, Android — required | Splash screen |
| 180×180 | iOS | apple-touch-icon |
| 384×384 | Android xxhdpi | |
| 152×152 | iPad | |
| 144×144 | Android xhdpi | |
| 128×128 | Chrome Web Store | |
| 96×96 | Android mdpi | |
| 72×72 | Android ldpi | Legacy |
Maskable icons
Android reshapes launcher icons into a circle, squircle or rounded square depending on the device. A normal icon gets a white box drawn behind it. A maskable icon fills the whole canvas and keeps its important artwork inside a centred circle covering 80% of the width — the outer 20% is padding the system may crop away.
Common problems
No install prompt appears
Check that the manifest is linked in the head, returns 200, has 192 and 512 icons, and that the site is on HTTPS. Chrome DevTools → Application → Manifest lists what is missing.
The Android icon has a white box around it
You are missing a maskable icon. Add one with purpose set to maskable.
The installed app opens in a browser tab
start_url is outside scope, or display is set to browser.
The splash screen is the wrong colour
background_color paints the splash before the app renders; theme_color paints the status bar.