Web App Manifest Generator
Generate manifest.webmanifest with icons, theme colours and display mode, plus the head tags and Next.js route.
Generate a manifest.webmanifest with the icons, colours and display mode a browser needs to offer installation.
Install preview
DevKit Tools
Free browser based tools for developers and creators.
standalone · opens at /?source=pwa
Home screen label
DevKit
A browser only offers installation when the site is served over https, has a manifest with a name, a start URL and a 192px and a 512px icon, and registers a service worker.
{
"name": "DevKit Tools",
"short_name": "DevKit",
"description": "Free browser based tools for developers and creators.",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"orientation": "any",
"theme_color": "#6d5efc",
"background_color": "#0b0d12",
"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"
}
]
}About the web app manifest generator
A manifest is what turns a website into something a phone will install to the home screen. It is a small JSON file, and the reason installation so often fails to appear is that one required piece is missing rather than anything complicated.
This generates the manifest, the head tags that go with it including the Apple specific ones, and a Next.js manifest route. It also flags the things that quietly stop the install prompt from showing.
How to use it
- 1Fill in the name, short name and start URL.
- 2Pick the display mode and the theme colours.
- 3Keep the maskable icon so Android does not clip your logo.
- 4Copy the manifest and the head tags into your site.
Questions
Why is there no install prompt?
A browser needs all of it: https, a manifest with name, start_url and both a 192px and a 512px icon, and a registered service worker. Miss one and nothing is offered, with no error.
What is a maskable icon?
Android crops icons into its own shape, which differs by device. A maskable icon keeps its important content inside a safe circle so nothing is cut off. Without one your logo may lose its edges.
What should short_name be?
Twelve characters or fewer. Home screens truncate past roughly that, and a truncated name is the first thing a user sees.
What does start_url with a query do?
Adding something like ?source=pwa lets your analytics separate installed launches from ordinary visits, which is the only reliable way to measure installs.