PWA Manifest Generator

Build an optimized, modern Web App Manifest (manifest.json) for your Progressive Web App and generate critical HTML link tags.

Basic Info & Identification

Application Name

Full name of your web app

Short Name

Used on home screen icons and launch screens

Description

Detailed explanation of what your app does

Start URL

Initial page when PWA is launched

Scope

Paths allowed to run inside this PWA

PWA ID

Unique identifier to avoid conflict

Branding & Look

Theme Color

Window chrome / address bar color

Background Color

Loading screen background color

Display Mode

Orientation

Text Direction

Assets & Localization

Icon Path Prefix

Base path for sizes (e.g. /icons/icon)

Language

Primary locale (BCP-47 language tag)

manifest.json

{
  "id": "/?utm_source=pwa",
  "name": "My App",
  "short_name": "App",
  "description": "A Progressive Web App",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#6366f1",
  "background_color": "#ffffff",
  "dir": "ltr",
  "lang": "en",
  "categories": [
    "utilities",
    "productivity"
  ],
  "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"
    }
  ]
}

HTML Meta Tags

<!-- PWA Manifest & Meta Tags -->
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#6366f1" />

<!-- Apple Mobile Web App Tags -->
<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="App" />
<link rel="apple-touch-icon" href="/icons/icon-192x192.png" />

<!-- Windows tile settings -->
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/icons/icon-144x144.png" />

Add the JSON code as manifest.json in your root directory, and paste the HTML snippet in your index file's <head> section.

Understanding Progressive Web App Manifest Options

The Web App Manifest tells the browser how your application should behave when installed on a mobile device or desktop computer. The display parameter controls how much browser chrome is visible, while theme and background colors affect the window border styling and the initial splash loading screen.

Providing high-resolution icons (specifically 192×192 px and 512×512 px) is required by modern browsers like Google Chrome and Apple Safari. Standardizing on the any maskable purpose ensures that device launchers can crop your icons safely without clipping the core design.

Built and maintained by Meet Shah · Last updated 14 August 2026

What this tool is used for

Producing a manifest so a site can be installed as an app.
Getting the icon size set right for every install surface.
Setting display mode and start URL deliberately.
Producing a manifest to compare against a framework's generated one.
Adding theme and background colours that match the app.

Frequently Asked Questions

What does a manifest actually enable?: Installability — a name, icons, a start URL and a display mode let a browser offer to add the app to the home screen. Without it the site remains an ordinary tab.
Which icon sizes are required?: 192px and 512px at minimum, plus a maskable variant so Android can crop it to the platform's shape. A single icon without the maskable purpose gets letterboxed inside a white circle.
What does display: standalone change?: It removes the browser chrome, so the app opens without an address bar. That also removes the back button on some platforms, which is why in-app navigation has to be self-sufficient.
Is a manifest enough to be installable?: No — browsers also require HTTPS and, in most cases, a registered service worker. The manifest describes the app; the service worker is what makes it behave like one offline.
Why is start_url worth setting carefully?: Because it is where the installed app opens, and it is also used to scope analytics. Adding a query parameter there is the standard way to measure how often the installed version is used.

Common errors and gotchas

Omitting a maskable icon, which leaves Android cropping the icon badly.
Setting a start URL outside the manifest's scope, which breaks installed navigation.
Assuming a manifest alone makes the app installable, when HTTPS and a service worker are also required.
Serving the manifest with the wrong content type, which stops browsers reading it.
Providing one icon size, which several install surfaces reject.