Stax
Tools

PWA Manifest Builder

Generate a complete Web App Manifest for your PWA.

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "description": "A Progressive Web Application",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<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" />

How the PWA Manifest Builder works

The PWA manifest builder generates a valid manifest.json for Progressive Web Apps. Fill in your app name, icons, theme colours, display mode, and start URL — the tool outputs the complete JSON alongside the HTML link tag to add to your document head and a Lighthouse-ready icon checklist. It covers all fields required to pass Chrome's PWA installability criteria and appear in Android's Add to Home Screen prompt.

Required manifest fields

The Web App Manifest specification requires name, short_name (used on the home screen), icons (with at least 192×192 and 512×512 px PNG entries), start_url, and display mode. The display field accepts standalone (removes browser UI, most app-like), minimal-ui (keeps back/refresh), fullscreen, and browser. For most app-like experiences, standalone is the correct choice and is required for the PWA install badge to appear in Chrome.

Theme colour and background colour

The theme_color field controls the browser toolbar colour on Android and the title bar colour in standalone mode. It should match your app's primary brand colour. The background_color field sets the splash screen background colour that appears while the service worker is loading the first time the PWA launches — it should match your app's loading screen background to avoid a flash of unstyled content.

App shortcuts

The shortcuts array defines quick actions that appear in the long-press context menu on Android home screen icons. Each shortcut has a name, short_name, url, and optional icons array. For example, a social app might expose shortcuts to "New Post" and "Messages" so users can jump directly to those features without opening the home screen first. Up to four shortcuts are displayed by Android's launcher.

Offline-first and service worker integration

A manifest.json alone does not make a PWA work offline — a service worker registered from your app's JavaScript handles caching and offline responses. The manifest tells the browser that your app is installable and PWA-capable; the service worker delivers offline functionality. The builder outputs the manifest and provides a link to the Workbox documentation for adding the service worker, completing the full PWA implementation.

Frequently asked questions

What is a web app manifest?
A Web App Manifest is a JSON file that tells the browser how to present your Progressive Web App when installed on a device. It enables features like Add to Home Screen, a splash screen with your branding, full-screen or standalone display mode (hiding the browser UI), and a custom theme colour for the status bar and title bar on Android and desktop.
What is the difference between standalone and fullscreen display?
Standalone removes the browser chrome — the address bar and navigation buttons — so the installed app looks and feels like a native app. Fullscreen removes the OS status bar as well, giving you the entire screen. Use standalone for most productivity and utility apps; use fullscreen for games or immersive media experiences where every pixel of screen space matters.
What icon sizes do I need for a PWA?
At minimum, provide a 192×192 icon (used for Add to Home Screen shortcuts) and a 512×512 icon (used for splash screens on Android). Chrome requires both sizes. Add a second icon with purpose set to maskable — this allows the OS to crop and reshape the icon into circles, squircles, or other shapes used by different Android launchers without cutting off your logo.

Related tools