Manifest.json Benefits
Apple, Google, and Microsoft keep leaning on the Web App Manifest. Fill it out once and your icons, theme color, and analytics fall into place everywhere.
What the manifest buys you
| Benefit | What you get |
|---|---|
| Install prompts that feel native | Chrome, Edge, and Android surface “Install app” banners only if your manifest declares icons, name, start_url, and display mode. |
| Offline-ready splash screens | The manifest gives you control over splash images, background colors, and maskable icons so offline launch looks intentional. |
| Consistent metadata everywhere | When search engines or social platforms inspect your manifest they pick up the same title, theme color, and icons you curated. |
Anatomy of a modern manifest
These are the fields Lighthouse and Android actually inspect before displaying your icon.
| Field | Why it exists | Pro tip |
|---|---|---|
| name & short_name | Controls install banner and launcher label text. | Keep short_name under 12 characters so it doesn't truncate on Android homescreens. |
| icons[] | Defines which PNGs power install surfaces, splash screens, and maskable logos. | Include 192, 256, 384, and 512 sizes with purpose: "any maskable" for best coverage. |
| start_url | Determines which route opens when a user launches from their dock. | Append ?source=pwa and read it server side to tailor analytics. |
| display | Switch between standalone, fullscreen, or minimal-ui experiences. | Use standalone plus theme_color to match your brand chrome. |
Where manifest icons start
Starter JSON
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Drop this file into /public/manifest.json and the generator inside Favicon Tools will keep the icon array up to date whenever you export a new set.
Release checklist
Keep this taped to your deployment dashboard so the manifest stays accurate after rebrands.
- 1
Serve and link the manifest
Serve the manifest at /manifest.json and expose it through <link rel="manifest" href="/manifest.json">.
- 2
Check every icon resolves
Ensure every icon referenced actually exists on your CDN and matches the declared size.
- 3
Align the browser chrome
Add theme-color and background_color meta tags to align browser chrome with your icon palette.
- 4
Lint and audit before release
Run npx next lint plus Lighthouse's PWA audit before every release to catch missing manifest fields.
- 5
Scope the installed app
Point the manifest scope at your primary app URL so installable shortcuts stay inside your domain.
Automate updates
Store your manifest template next to your icon configuration. When CI builds a new favicon set, update the JSON and redeploy together.
Test like a native app
Install your site on iOS, Android, and desktop Chrome. Verify the splash screen, icon mask, and theme color match the manifest values.
QA teams like a simple checklist: install, launch offline, inspect icon quality, verify the analytics parameter.