PWA manifest generator and validator
Fill in the form to get a manifest.webmanifest and the head tags that link it, or paste the manifest your site already serves. Both go through the same checklist: Chrome's install criteria, the rules that pick its install dialog, and the fields worth fixing.
Your manifest
Serve it from the site root as manifest.webmanifest; the head tags below point there.
{
"name": "Aurora Play",
"short_name": "Aurora",
"description": "Daily tournaments, rewards and your account, one tap from the home screen.",
"lang": "en",
"id": "/",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#0b0d14",
"background_color": "#0b0d14",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}HTML head tags
Add them to every page of the app. apple-touch-icon is for Safari on iOS; 180×180 is the usual size.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0b0d14">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">Checklist
Meets all 5 of Chrome's install criteria that live in the manifest. The live site still has to pass what this page can't check.
Failed: 0 · Warnings: 0 · Passed: 12 · Notes: 2
Chrome install criteria
The part of Chrome's list that lives in the manifest.
- Pass name or short_name Set: name, short_name.
- Pass icons: 192px and 512px A 192×192 and a 512×512 icon are declared.
- Pass start_url Set to /.
- Pass display standalone qualifies for install.
- Pass prefer_related_applications Not set to true.
Install dialog
Which of Chrome's two install dialogs this manifest gets.
- Note Dialog on Android No screenshots, so Android shows the compact dialog.
- Note Dialog on desktop No wide screenshots, so desktop Chrome shows the default dialog.
- Pass description 74 characters. Fills the text line in the tall sheet.
Worth fixing
Not needed for install, but people see the result.
- Pass short_name length 6 characters, fits most home screens.
- Pass scope start_url / is inside scope /.
- Pass id Set to /. The app keeps its identity if start_url changes.
- Pass Maskable icon Declared. Android can fill its adaptive icon shapes.
- Pass theme_color #0b0d14 is a valid color.
- Pass background_color #0b0d14 is a valid color.
Checklist
Results appear here after you check a manifest.
What a manifest check can't prove
A clean checklist means the file meets Chrome's rules. This page doesn't prove the app is installable: that also depends on the live site.
- HTTPS
- Chrome only offers install on pages served over HTTPS.
- Icon files
- This page reads the sizes you declare. It can't confirm the files exist or really are 192 and 512 pixels; DevTools → Application → Manifest shows what Chrome actually loaded.
- The link and the response
- Every page needs the <link rel="manifest"> tag, and the file must load and parse. Chrome requests it without credentials unless the tag sets crossorigin="use-credentials".
- Service worker
- Chrome's current install criteria no longer list one, but offline pages, caching and push still need it, and this page can't see yours.
- The visit itself
- Chrome also waits for a click or tap and 30 seconds on the page, and doesn't offer to install an app that's already installed.
Manifest fields and what Chrome does with them
Member names and values follow MDN's Web App Manifest reference; Chrome's behavior follows Chrome's own documentation.
| Member | What it does | What Chrome does with it |
|---|---|---|
name / short_name | The app's name; short_name is used where space is tight, like under the home-screen icon. | One of the two is required for install. The splash screen shows name. |
icons | Images for the home screen, launcher, task switcher and splash screen. | Needs a 192px and a 512px icon to offer install. Without a maskable one, Android puts the icon on a white background. |
start_url | The page that opens when the app launches. | Required for install. A start_url on another origin is ignored in favor of the page the install started from. |
scope | The URLs that belong to the app. | Pages outside it show browser UI in the app window. If start_url isn't inside scope, scope is ignored. |
id | The app's permanent identity. | Without it, identity comes from start_url, so a later start_url change can register a second app. |
display | How much browser UI the app window keeps. | fullscreen, standalone, minimal-ui or window-controls-overlay qualify for install; browser doesn't. |
orientation | The default orientation. | Applied when the app opens; without it the app follows the device and user settings. |
theme_color | Toolbar and task-switcher color. | Colors the app's toolbar. Keep it equal to the theme-color meta tag. |
background_color | Splash screen background. | Used on the splash screen on mobile. Match the page background for a smooth start. |
description | A short summary of the app. | Fills the text line in the tall install sheet; cut off after 300 characters. |
screenshots | Images of the app in use. | Usable entries switch to the tall install sheet: wide ones on desktop, narrow or unlabeled ones on Android. |
prefer_related_applications | Points users to a native app instead. | true on Android sends users to the Play Store app from related_applications instead of installing the PWA. |
lang | Language of name and description. | MDN lists lang as not implemented in browsers yet; harmless to include. |
Rich or compact install dialog
Chrome shows one of two install dialogs, and the manifest picks it. With at least one screenshot Chrome can use, it opens a tall sheet with a gallery. Without one, it shows a small card with the icon, name, domain and Install.
description doesn't choose the format. It only fills the text line inside the tall sheet, so deleting it doesn't bring the compact card back. On desktop only wide screenshots count; Android ignores wide ones and shows narrow entries or entries without form_factor.
Which dialog installs better hasn't been measured in public. Pick one on purpose and test it on your own traffic.
Read: Chrome's two install dialogs, side by sideWhere manifests usually go wrong
- 1
Declared sizes that aren't real
sizes is a promise, not a measurement. A 512x512 entry pointing at a 256px file passes any manifest check. Export each file at the size you declare.
- 2
Changing start_url without an id
With no id, the app's identity is its start_url. Move it, and browsers treat the new manifest as a different app, so people can end up with two icons.
- 3
Click IDs in start_url
MDN warns that a per-user start_url, like ?user=123, becomes a persistent fingerprint. Keep click IDs in your tracker, not in the launch URL.
- 4
Deleting icons to get the compact dialog
Icons decide whether install is offered at all. For the compact dialog, remove the screenshots; remove the icons and no dialog appears.
Stop hand-editing a manifest for every PWA.
DarkCore builds the manifest for each PWA. The rich or compact install dialog is a setting you switch and measure, with install, open and offer arrival tracked as separate events.