Web Manifest Generator
This web manifest generator creates a spec-compliant site.webmanifest (also called a manifest.json or web app manifest) so your site can be installed as a Progressive Web App on Android, iOS, Windows and ChromeOS. Fill in the form and the tool builds valid JSON plus the <link rel="manifest"> tag you paste into your <head>. It runs 100% in the browser — nothing is uploaded.
What goes in a PWA manifest?
The web app manifest is a small JSON document that the browser reads to decide how to install and launch your app. The most important members are name and short_name (the full title for the splash screen and the abbreviated label under the home-screen icon), icons (an array of PNGs in different sizes — at minimum a 192×192 and a 512×512), theme_color (tints the browser toolbar and Android status bar), background_color (the solid color painted on the splash screen before your CSS loads), display (usually standalone so the app opens without browser chrome), start_url (the page that opens when the user taps the icon) and scope (which URLs are considered part of the app).
standalone vs fullscreen vs minimal-ui vs browser
The display member controls how much browser UI is shown. standalone hides the address bar so your PWA feels native — this is the right choice for most installable apps. fullscreen hides everything including the status bar (good for games). minimal-ui keeps a small set of navigation controls. browser opens in a normal tab, which effectively disables the installed-app experience. If install prompts are not appearing, confirm display is not set to browser.
Why theme_color and background_color matter
Setting both colors removes the jarring white flash users see when an app launches. background_color should match your app's base background so the splash screen blends into your first paint, while theme_color should match your brand so the OS chrome looks intentional. The same theme_color should also appear as a <meta name="theme-color"> tag in your HTML for browsers that read it from the document.
Maskable icons and the manifest
Android renders adaptive icons by clipping your image to a circle, rounded square or teardrop depending on the device. If your icon has no padding it gets cut off at the edges. The fix is an additional icon entry with "purpose": "maskable" pointing to an image whose logo sits inside the central safe zone. This generator can add that entry automatically — pair it with our maskable icon generator to produce the padded PNG, and use the favicon generator to produce the underlying icon set in the first place.
Where to put the file
Save the JSON as site.webmanifest (or manifest.json) at your site root, serve it with the application/manifest+json content type if you can, and link it from every page with <link rel="manifest" href="/site.webmanifest">. Combined with HTTPS and a service worker, a valid manifest makes your site installable and unlocks the "Add to Home Screen" prompt on supported browsers. Pair it with an Apple Touch Icon so iOS home-screen icons look just as sharp.
web manifest generator pwa manifest generator site.webmanifest generator manifest.json generator web app manifest theme-color standalone display mode maskable icons add to home screen progressive web app
© 2026 hjLabs.in · Built on Cloudflare Workers