Manifest Icons: The icons Array in a Web App Manifest
A manifest icon is an entry in the icons array of a web app manifest, the JSON file that describes your site when it is installed. Each entry gives a src, a sizes string, usually a type, and optionally a purpose, and the browser picks the closest match for the home screen, the app launcher, the task switcher and the splash screen. At minimum declare a 192x192 and a 512x512 PNG.
What the array is for
The web app manifest is a JSON file linked from your head that tells a browser how your site should behave when it is installed: its name, its start URL, its display mode, its theme colour, and its icons. Manifest icons are the ones used outside the browser chrome — the launcher, the app switcher, the install prompt, the splash screen.
Unlike favicon link tags, the array is a list of candidates rather than a set of instructions. You describe what each file is, and the browser chooses per surface. That means declaring more entries is cheap: nothing is downloaded until a surface needs it.
A minimal manifest
{
"name": "Example App",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"theme_color": "#0b0b0b",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Link it from the head with <link rel="manifest" href="/manifest.json">. The file may also be named manifest.webmanifest; the link tag is what matters.
Fields on an icon entry
| Field | What it does |
|---|---|
| src | Path to the image, resolved relative to the manifest URL. Required. |
| sizes | Dimensions as "WIDTHxHEIGHT", or several space-separated for a multi-size file. |
| type | MIME type, e.g. image/png. Lets a browser skip formats it cannot decode. |
| purpose | "any" (default), "maskable" for icons safe to crop, or "monochrome". |
Manifest icon FAQ
Why 192 and 512 specifically?
192x192 is the size Android uses for the home screen icon on common screen densities, and 512x512 is the size used for the splash screen and the install prompt. Together they satisfy the installability checks in Chromium browsers.
Do manifest icons replace my favicon?
No. They cover installed-app surfaces only. Browser tabs, bookmarks and history still come from your link rel="icon" tags and /favicon.ico, so ship both.
Does iOS read the manifest icons?
Safari reads the manifest for things like name and display mode, but the Home Screen icon comes from the apple-touch-icon link. Declare both if you want the icon to be right on iOS and Android.