site.webmanifest explained, every field you actually need

A web app manifest is a small JSON file that describes your site to the browser well enough for it to be installed as a standalone app. It is what separates a bookmark from a home screen icon with a splash screen. This guide is the minimal, modern manifest and what each field does.

The minimum viable manifest

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "description": "What the site does in one sentence.",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0a0a0a",
  "background_color": "#0a0a0a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

That is it. Eight fields and an icon array. Every field below is optional unless noted.

Field by field

name (required)

The full name of your site. Shown on the install prompt and in the Android app drawer. Keep it under 45 characters; Android truncates past that.

short_name

The short name shown under the home screen icon. Keep it under 12 characters; Android truncates past that. Falls back to name if omitted.

description

One sentence. Used by the install prompt on newer Chrome, and as metadata by some app stores.

start_url

The URL the app opens at when launched. Usually /. Add query params like ?utm_source=pwa to track installs in analytics.

display

How the app appears when launched.

• standalone (recommended): own window, no browser UI
• fullscreen: full screen, no status bar
• minimal-ui: standalone plus a minimal back button
• browser: regular tab (defeats the point)

theme_color

Tints the Android task switcher card, the Chrome address bar when the user is on your site, and the status bar in standalone mode. Match your brand. Pair with a <meta name="theme-color"> tag in your HTML for consistency.

background_color

The solid colour shown under the splash screen during first launch, before your page paints. Match what the user sees at page load, not your brand. A mismatch causes a visible flash.

icons (required)

An array of PNG entries. Ship 192x192 and 512x512 with purpose: "any maskable". Add an SVG entry if you want a crisp install prompt icon on Chrome desktop.

scope

Restricts which URLs open inside the installed app vs in an external browser. Defaults to the directory of the manifest file. Usually you want "/".

Fields you can skip

• orientation: most sites don’t need it. Default (any) is fine.
• lang and dir: useful for right-to-left languages.
• categories, screenshots, shortcuts: app store metadata that Chrome uses in limited contexts. Add only if you want richer install prompts.
• prefer_related_applications, related_applications: only if you have a native app you want to cross-promote.
• gcm_sender_id: deprecated.

Linking from HTML

One line:

<link rel="manifest" href="/site.webmanifest" />

Browsers fetch the manifest, parse it, and cache it with the service worker scope. Changes propagate on next visit.

Testing

Chrome DevTools → Application → Manifest parses the manifest, renders the icons at their declared sizes, and shows errors for missing required fields. Lighthouse’s PWA audit flags a manifest that is incomplete enough to block install.

Serving it

site.webmanifest is a JSON file, but the MIME type should be application/manifest+json. Most static hosts will serve .webmanifest with that type automatically; Vercel, Netlify, and Cloudflare Pages do. If you use a custom server, set the content type explicitly.

Faviconry generates the manifest with correct icon entries and MIME-compatible filename in one download, along with the two PNGs you need.

Framework-specific setup

Where the manifest file lives and how it gets linked differs per framework:

• Next.js — /app/manifest.webmanifest or metadata export
• Astro — /public/site.webmanifest + link in BaseLayout
• SvelteKit — /static/site.webmanifest + link in app.html
• React (Vite / CRA) — /public/site.webmanifest + link in index.html
• Vue / Nuxt — /public/site.webmanifest + link in app.head