Web app manifest generator
A manifest.json for an installable web app: name, colours, icons and display.
FreeRuns in your browserNo signupUpdated 2026-11-05
Install checks follow Chrome's published criteria: a name, start_url, display set to standalone, minimal-ui or fullscreen, and 192px and 512px icons, served over HTTPS.
Installable
Meets the checks
Chromium manifest requirements
Icons
3
entries in the icons list
{
"id": "/",
"name": "Example Field Service",
"short_name": "FieldApp",
"description": "Book jobs, track technicians and send invoices from your phone.",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#0f172a",
"background_color": "#ffffff",
"categories": [
"business",
"productivity"
],
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Put it in the site root and the icons at the paths listed.
<link rel="manifest" href="/manifest.webmanifest" /> <meta name="theme-color" content="#0f172a" />
About this tool
How it works and how to read the result.
Need this done for you?
Web app & SaaS development
SaaS products and web apps, from first version to scale.
See the serviceWhat it does
A web app manifest is a small JSON file that tells browsers how your site should behave when someone installs it to their home screen or desktop: what it is called, which icon to show, what colour the splash screen should be and whether it opens in its own window. This generator writes the file from a short form and checks it against Chrome's install criteria as you type, so you can see straight away whether anything will stop the install prompt from appearing.
How to use it
- Enter the app's full name and a short name for the home screen.
- Leave start_url, scope and id as "/" unless the app lives in a subfolder.
- Pick a display mode. Standalone gives an app window with no address bar.
- Set the theme and background colours.
- Enter the path prefix for your icons, then create PNG files at the 192px and 512px sizes with those names.
- Download the file, put it in the site root and add the link tag to every page.
How to read the result
With the defaults, the manifest has a name, a short name of eight characters, a description, start_url, scope and id of "/", display set to standalone, two colours, two categories and three icons: 192px, 512px and a 512px maskable version. The Installable stat shows "Meets the checks" because every required member is present.
Change display to browser and the stat turns red with one blocking issue, because a site that opens in a normal tab is not treated as installable. Clear the icon prefix and you get another blocking issue. Amber notes are advice rather than blockers: a short name longer than 12 characters, a colour that is not written in hex, and so on.
The second code block is what goes in the head of every page: the manifest link and a theme-color meta tag that matches the manifest. In Next.js you can set the colour with the viewport export instead.
The generator writes the file but does not check that your icons exist or are the right size. Open the file in your browser's developer tools (Application, then Manifest) after uploading, and it will report missing or wrongly sized icons.
To make the icon files, try the app icon generator or the favicon generator. If you are planning an installable app with offline support and logins, see our web app development service.
Questions
Frequently asked.
What does a browser need before it offers to install my app?
Chrome's published criteria are HTTPS, a manifest with a name or short_name, a start_url, a display mode of standalone, minimal-ui or fullscreen, and icons at 192px and 512px. prefer_related_applications must be absent or false. The visitor also has to interact with the page for a short time before the prompt appears.
Should the file be called manifest.json or manifest.webmanifest?
Either works. The specification registers the .webmanifest extension and the application/manifest+json media type, but browsers accept .json served as application/json too. What matters is that the link tag in your page head points at the right path.
What is a maskable icon?
An icon with extra padding around the logo, so Android can crop it into a circle, squircle or other shape without cutting off the important part. Mark it with purpose maskable. Without one, Android may shrink your square icon and place it on a white background inside its shape.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide