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.