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

16x16

32x32

96x96

192x192

Rendered at true pixel dimensions. Tab favicons stop being useful around 32px; the manifest picks up from 192 and runs to 512, which is why an upscaled tab icon looks soft on an Android home screen.

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.

Serve and link the manifest — Serve the manifest at /manifest.json and expose it through .

Check every icon resolves — Ensure every icon referenced actually exists on your CDN and matches the declared size.

Align the browser chrome — Add theme-color and background_color meta tags to align browser chrome with your icon palette.

Lint and audit before release — Run npx next lint plus Lighthouse's PWA audit before every release to catch missing manifest fields.

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.

Browsers cache the manifest hard: Append ?v={buildId} to the tag so users download the latest copy instead of the one they installed with.

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.