site.webmanifest · PWA install
Web manifest generator
Fill in the form to build a web app manifest, with live validation and a preview of the install card, or paste the manifest you already have and see what browsers will make of it.
1Your manifest
2Result
Install cardpreview
Pouch Notes
example.com
Quick notes that live in your pocket.
Checks0 errors · 0 warnings · 0 notes
- No problems found. Browsers have everything they need from this manifest.
site.webmanifest
{
"id": "/",
"name": "Pouch Notes",
"short_name": "Pouch",
"description": "Quick notes that live in your pocket.",
"lang": "en",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ec4a2b",
"background_color": "#ffe8d8",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Link it from every page: <link rel="manifest" href="/site.webmanifest">
What each field does
- name and short_name: the full name for install dialogs, and the label under the home-screen icon (about 12 characters fit).
- start_url, scope and id: the page the app opens on, the URLs that stay inside the app window, and a stable identity that survives a change of start_url.
- display: standalone opens an app window without the address bar; browser opens a normal tab.
- theme_color and background_color: the title bar colour, and the splash screen shown while the app loads.
- icons: at least a 192 × 192 and a 512 × 512 PNG, plus a separate maskable icon for Android's shaped icons.
Questions
Should the file be called site.webmanifest or manifest.json?
Either works; browsers follow the link tag, not the name. The .webmanifest extension is the registered one and is served as application/manifest+json by many hosts.
Why is my app still not installable?
Browsers also need the page to be served over HTTPS and the manifest to be linked from it, and some want a service worker. The checks here cover the manifest itself.
Is anything sent to a server?
No. The manifest is built and validated in this tab, and a preview image you pick stays on your device.