About Web App Manifests

About Web App Manifests

by John Vincent


Posted on June 15, 2018


This stuff ends up sprayed everywhere, so let's create a reference document.

Web App Manifests

Google Web Fundamentals

Mozilla Web Docs

W3C Working Draft of Web App Manifest

Google Sample Manifest

Create Web App Manifest

In practice, I usually create the manifest when I create the favicons.

For details, see Using Favicons

The key is

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

Manual Changes

Check file favicons/manifest.json, should look something like

{
    "short_name": "John Vincent",
    "name": "John Vincent Portfolio",
    "icons": [
        {
            "src": "\/favicons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png"
        },
        {
            "src": "\/favicons\/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image\/png"
        }
    ],
    "background_color": "#382838",
    "theme_color": "#ffffff",
    "start_url": "index.html",
    "display": "standalone",
    "orientation": "landscape"
}

short_name should be no more than 12 characters.