Web App Manifest file

The essential idea

The manifest.json is a JSON file that describes your app: its name, icons, colors, start URL, and display mode. Browsers use it to install your PWA and customize the launch experience.

A complete manifest example

This manifest defines app name, icons at multiple sizes, theme color, and display mode.

{
  "name": "My Todo App",
  "short_name": "TodoApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#8f5cf6",
  "scope": "/",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Output:

Manifest configured for app installation with custom colors and icons.

A common trap

Always provide at least 192x192 and 512x512 icons. Missing icons prevent installation prompts from appearing.

Quick check

Quick check: What does the 'display' field control in manifest.json?

• How the app appears when launched (fullscreen, standalone, minimal-ui, browser)
• The screen brightness and contrast
• Which languages to support

Real-world manifest patterns

Study manifests from Twitter Lite, Spotify, and Pinterest to see production patterns.