Skip to content
AZ Tools

PWA Manifest Builder

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.

—
Icons
manifest.json
{
  "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"
    }
  ]
}
HTML head (link + Apple meta)
<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`. Lighthouse PWA audit will flag missing fields.

How to use

  1. 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.
  2. Pick a display mode: `standalone` (no browser UI, recommended) is the most common. `fullscreen` hides the status bar; `minimal-ui` keeps a thin browser shell.
  3. Add icons. The defaults cover Android (192/512), maskable variants for adaptive icons. Copy the JSON to `manifest.json`, the HTML to your `<head>`.

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.

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 0 0

/.well-known/* URI Reference

Searchable catalog of well-known URIs registered with IANA — `security.txt`, `openid-configuration`, `apple-app-site-association`, `acme-challenge`, and 30+ more, with RFC references and use cases.

Network 0 0

JWT Decoder

Decode a JSON Web Token to inspect its header, claims, and expiration.

Developer 0 0

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 0 0

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 0 0

JSON Formatter & Validator

Format, beautify, minify, and validate JSON right in your browser.

Developer 0 0