PWA Foundations

Why manifest.json Still Matters in 2025

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.

Benefit

Install prompts that feel native

Chrome, Edge, and Android surfaces “Install app” banners only if your manifest declares icons, name, start_url, and display mode.

Benefit

Offline-ready splash screens

The manifest gives you control over splash images, background colors, and maskable icons so offline launch looks intentional.

Benefit

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 & 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 + `theme_color` to match your brand chrome.

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 the manifest at /manifest.json and expose it through `<link rel="manifest" href="/manifest.json">`.

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

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

Run `npx next lint` plus Lighthouse’s PWA audit before every release to catch missing manifest fields.

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.

Because browsers cache this file aggressively, append ?v={buildId} to the <link rel="manifest"> tag so users download the latest copy.

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 love a simple checklist: “Install → Launch offline → Inspect icon quality → Verify analytics parameter.”

Generate your manifest-ready icons