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.

PWA Manifest Builder

Developer

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.

—

NameShort name (home screen)

Description

Start URLScope

Display modeOrientation

Theme color

Background color

LangDirectionCategories

Icons

Icon base path

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

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. `fullscreen` hides the status bar; `minimal-ui` keeps 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>`.

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.