📋JSON Templates

Web App Manifest (manifest.json)

Progressive Web App manifest for installable web applications.

Explanation

Web app manifest defines metadata for PWAs to be installed on devices.

Examples

PWA Manifest

Output

{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "description": "An awesome progressive web app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Code Examples

HTML Link

<!-- Add to <head> -->
<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="black">
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">

manifest.json

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

Try it Now

Open in JSON Formatter

💡 Tips

Provide icons at multiple sizes (72, 96, 128, 144, 152, 192, 384, 512)
Use "standalone" display for app-like experience
Test with Lighthouse PWA audit
Include maskable icons for Android
Set appropriate orientation

⚠️ Common Pitfalls

Missing required icon sizes
start_url must be in scope
Manifest must be served with correct MIME type
Icons must be served over HTTPS