PWA Manifest Builder
Build a valid manifest.json for a Progressive Web App — name, icons, theme color, display mode, scope — with the matching HTML <link> tags.
{
"name": "My App",
"short_name": "MyApp",
"description": "A progressive web app",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#0ea5e9",
"background_color": "#ffffff",
"lang": "en",
"categories": [
"productivity",
"utilities"
],
"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"
}
]
}<link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#0ea5e9" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-title" content="MyApp" /> <link rel="apple-touch-icon" href="/icons/icon-180.png" />
Serve manifest.json with Content-Type: application/manifest+json. Chrome DevTools' Application panel lists any missing fields.
How to use
- Set name + short_name (short_name shows on the home screen — keep it under 12 characters). Set start_url to where the app should open when launched.
- Pick a display mode:
standalone(no browser UI, recommended) is the most common.fullscreenhides the status bar;minimal-uikeeps a thin browser shell. - Add icons. The defaults cover Android (192/512), maskable variants for adaptive icons. Copy the JSON to
manifest.json, the HTML to your<head>.
About this tool
ShowHide
A PWA manifest tells browsers and operating systems how to install and present your web app: launch icon, splash color, full-screen vs browser chrome, supported orientations, deep-link scope. This builder generates a spec-compliant manifest.json with the fields you actually need, including a sensible default icon set (192px and 512px, with maskable variants for Android's safe area). Output also includes the <link rel="manifest"> plus Apple-specific apple-mobile-web-app-* meta tags, because Apple still hasn't implemented full manifest support and you need both for cross-platform installability. Everything is editable; the JSON regenerates as you type.
Frequently asked questions
What's a maskable icon?
Android adaptive icons crop your icon into a system-defined shape (circle, squircle, rounded square). A purpose: maskable icon includes safe zone padding around the logo so the crop doesn't chop off the edges. Generate maskable variants at 192/512 with ~20% padding around the logo.
Do I need both manifest.json and Apple meta tags?
Yes if you want install-to-home-screen on iOS. Apple has partial manifest support (theme_color, icons via apple-touch-icon) but ignores most of it. The apple-mobile-web-app-capable meta is what actually makes iOS treat your site as a standalone app.
The manifest is in place but no install prompt appears. What is missing?
Usually one of three things: the page is not served over HTTPS, there is no registered service worker with a fetch handler, or the icon set lacks a large square icon. Browsers also apply their own engagement heuristics and rate limits, so a technically valid app can wait for a second visit. The install audit in a browser's developer tools names the failing criterion directly, which is faster than guessing.
Why does my icon get cropped on Android?
Because the platform applies its own mask — a circle, a squircle, a rounded square, depending on the device — to any icon marked maskable, and it crops to that shape. A maskable icon has to keep everything important inside a safe zone in the middle, roughly the central four-fifths, with the rest as bleed. Ship both purposes: a normal icon for contexts that do not mask, and a maskable one designed for the crop.
Related tools
Favicon Generator (multi-size PNG)
Generate 10 favicon PNG sizes (16, 32, 48, 64, 96, 128, 180, 192, 256, 512) from one source image — copy the HTML snippet.
File
/.well-known/* URI Reference
Searchable catalog of well-known URIs registered with IANA — security.txt, openid-configuration, acme-challenge and 30+ more, with RFCs.
Network
JWT Decoder
Decode a JSON Web Token to inspect its header, claims, and expiration.
Developer
Plist Viewer (binary & XML)
Open an Apple property list — binary or XML — and read it as a tree, or convert it to JSON or XML plist.
File
JSON Patch Builder (RFC 6902)
Generate an RFC 6902 JSON Patch from a source/target pair, or apply an existing patch to a document. Supports add, remove, replace, move, copy, test ops.
Developer
JSON Formatter & Validator
Format, beautify, minify, and validate JSON right in your browser.
Developer