Stax

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" />

Generate your PWA manifest.json

Fill in your app details to generate a complete, valid Web App Manifest. Includes app shortcuts, theme colors, icon paths, and the HTML link tags to add to your <head>.

Frequently asked questions

What is a web app manifest?
A Web App Manifest is a JSON file that tells the browser about your Progressive Web App. It enables features like Add to Home Screen, splash screens, full-screen mode, and custom theme colors.
What is the difference between standalone and fullscreen display?
Standalone removes the browser UI (address bar, navigation buttons) so the app looks native. Fullscreen removes the status bar too. Use standalone for most apps; fullscreen for games or immersive experiences.
What icon sizes do I need for a PWA?
Minimum: 192×192 (for Add to Home Screen) and 512×512 (for splash screens). Chrome requires both. Use purpose: maskable for icons that should be cropped by the OS into different shapes.

Related tools