PWA manifest.json Generator

manifest.json: the file that turns a website into an installable PWA

The Web App Manifest is a JSON file standardized by the W3C that tells browsers and operating systems how your site should behave when installed as an app. It is the one ingredient that transforms a regular website into a Progressive Web App — a launchable icon on the home screen, a splash screen on cold start, a frameless window without the URL bar, and the ability to register handlers for share targets, file types, and OS shortcuts. Without a manifest, Chrome simply refuses to show the install prompt, and iOS will only support a limited "add to home screen" experience.

Required fields for installability

• name or short_name — the full and short label shown under the icon. short_name is used when space is tight (max 12 characters).
• start_url — the route launched when the user taps the home screen icon. Use "/?source=pwa" to track installs in analytics.
• display — how the window is chromed: standalone (no URL bar — looks like a native app), fullscreen (covers the status bar too — for games), minimal-ui (small back/refresh controls), or browser (a regular tab).
• icons — at minimum a 192×192 and a 512×512 PNG. Without both, Chrome will not surface the install banner.

Important optional fields

• theme_color — paints the Android status bar and the splash screen header.
• background_color — the splash screen color while the JS bundle is loading. Match it to the body background to avoid a visible flash.
• scope — limits which URLs are considered "inside" the app. Links outside the scope open in the browser, not in the PWA window.
• orientation — portrait, landscape, any, or natural.
• description, categories, lang, dir — metadata used by app stores (Microsoft Store, Play Store via TWA) and by accessibility tools.

Example manifest.json

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#6366f1",
  "background_color": "#ffffff",
  "lang": "en",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Maskable icons: safe-zone design

Android lets manufacturers apply masks to app icons — circle on Pixel, squircle on Samsung, rounded rectangle on Stock — and crops anything outside the mask. The "purpose": "maskable" flag tells the OS the icon is designed to survive cropping. The rule is: keep all important visual content (the logo, the wordmark) inside a centered safe zone of 80% of the canvas; the outer 10% on each side may be cropped. Without a maskable icon, Android wraps your icon in an ugly white circle, which kills brand recognition.

Shortcuts and screenshots

Shortcuts populate the context menu when the user long-presses the icon (Android) or right-clicks the taskbar icon (Windows). You can declare up to 4 shortcuts, each pointing to a deep link inside the app — perfect for "New post", "Inbox", "Settings", "Search".

Screenshots are required for richer install prompts on Chrome 99+. Provide one or more wide screenshots (1280×720 or similar) and they appear in the install dialog like a Play Store listing, dramatically increasing install conversion.

Service worker is a separate file

The manifest only describes the app. To actually work offline, intercept network requests, or receive push notifications, you need a service worker registered separately in JavaScript (navigator.serviceWorker.register('/sw.js')). Chrome's full install criteria are: HTTPS + valid manifest + registered service worker with a fetch handler + 192 and 512 icons. iOS has no service worker requirement for "Add to Home Screen", but features available offline are still limited compared with Android.

HTML reference

<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#6366f1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

FAQ

Does it work on iOS? Partially. iOS reads start_url, display: standalone, and icons, but ignores shortcuts, screenshots, maskable purpose, push notifications, and most advanced features. Apple has been catching up slowly since iOS 16.4.

Where do I validate the manifest? In Chrome DevTools → Application → Manifest, which shows parse errors and missing required fields, and in Lighthouse → PWA audit, which scores installability end to end.

Can the file be named .webmanifest instead of .json? Yes — .webmanifest is the official extension and is more common in modern projects. The server must serve it with Content-Type: application/manifest+json for the strictest validators.

Why does my PWA fail Lighthouse's "Installable" check? Most common reasons: missing 192 or 512 icon, missing start_url, no service worker registered, served over HTTP instead of HTTPS, or the manifest scope excludes the current page.

Does theme_color change in dark mode? Yes — use a <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a"> alongside the manifest. The manifest field is the default; the media-query meta overrides it per scheme.