Let people install the site

How to do it

Serve manifest.webmanifest as application/manifest+json and link it from the head. Include name, short_name, start_url, display, colours, and any and maskable icons.

Examples

JSON example

{
  "name": "Example Studio",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2347d6",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

HTML example

<link rel="manifest" href="/manifest.webmanifest">

How to check

curl -sI on the manifest answers 200 as application/manifest+json, and each icon in it answers 200. DevTools › Application › Manifest shows no errors.

Sources

• W3C Web Application Manifest

Related rules

• WEB-8 Ship a full set of icons in Website
• WEB-264 Give the installed app a fixed identity in Website
• AXS-9 Work in both orientations in Accessibility