Skip to content
ZeroServer.tools

PWA Manifest Generator

Build a Web App Manifest (manifest.json) for your Progressive Web App with icons and theme settings.

App details

Icons generated: /icons/icon-192x192.png, /icons/icon-512x512.png, etc.

manifest.json

{
  "name": "My App",
  "short_name": "App",
  "description": "A Progressive Web App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#6366f1",
  "background_color": "#ffffff",
  "lang": "en",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Link this file in your HTML: <link rel="manifest" href="/manifest.json">

How to use the PWA manifest

The Web App Manifest tells browsers how to display your app when installed on a device. The display mode controls the app chrome: standalone hides the browser UI (most common), fullscreen hides the status bar too, andminimal-ui keeps basic navigation controls.

Provide icons at 192×192 px and 512×512 px at minimum — Chrome and Android require both. Set purpose: "maskable" on icons designed for adaptive icon shapes (safe zone must fit within 80% of the canvas). For a complete boilerplate, try the HTML Boilerplate Generator and generate a Favicon alongside your manifest.

Private & free — this tool runs entirely in your browser.

Recommended: IndieKit Ship your Next.js startup in days.affiliate

Related Developer Utilities tools