Web App Manifest Guide: A Real manifest.json, Field by Field
The web app manifest is a small JSON file that tells the OS how to install your site: its name, its icons, and its colors. Here is a real one, field by field.
What the manifest is for
The manifest is what turns a website into something the OS can install. When a user adds your site to a home screen, the browser reads the manifest to decide the icon, the name under it, the splash screen, and whether the app opens with or without browser chrome.
It is plain JSON. You need one file, linked from every page, plus the icon PNGs it points at. Every field below maps to something a user sees.
The fields that matter
| Field | What it controls |
|---|---|
| name | The full app name, shown on the install prompt and splash screen |
| short_name | The name under the home-screen icon, where space is tight |
| icons | The icon set. Include 192 and 512 PNGs, plus one marked maskable for Android shapes |
| theme_color | The color of the OS UI around the app, like the status bar |
| background_color | The splash-screen background shown while the app loads |
| display | How the app opens. standalone hides browser chrome so it feels native |
| start_url | The page the app opens to when launched from the home screen |
A complete manifest.json
{
"name": "Acme Dashboard",
"short_name": "Acme",
"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"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}Two standard icons and one maskable, so Android can crop to any launcher shape without clipping your logo.
Wire it into your pages
<link rel="manifest" href="/manifest.json">Put this in the <head> of every page. Without the link tag, the file exists but nothing reads it.
Common questions
What is a web app manifest?
A small JSON file that tells the browser and OS how to install your site: its name, icons, colors, and how it should open. It is what makes a page installable to a home screen.
What is the difference between theme_color and background_color?
theme_color tints the OS UI around the app, like the status bar. background_color fills the splash screen shown while the app loads. They are often the same value, but they control different surfaces.
Where do I put manifest.json?
Serve it from a stable path like your site root, then reference it with <link rel="manifest" href="/manifest.json">. The icons it lists must resolve from the paths in the src fields.
Do I need a manifest for a normal website?
Only if you want install prompts and home-screen icons. A plain informational site works fine without one, but any site users might save to a phone benefits from it.