The site.webmanifest (also called the Web App Manifest) is a JSON file that gives browsers metadata about your website or web app. Without it, Chrome on Android won't show an "Add to Home Screen" install prompt, and your PWA won't have a splash screen icon.

What does site.webmanifest do?

The manifest tells the browser:

The name and short name of your app
Which icons to use for home screen shortcuts and splash screens
The theme color (affects browser chrome on mobile)
The background color for the splash screen
The display mode (standalone, fullscreen, minimal-ui, or browser)
The start URL when launched from the home screen

A minimal site.webmanifest

Here is the minimum content needed for Android Chrome to recognize your site as installable:

{
  "name": "My Website",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#0f766e",
  "background_color": "#ffffff",
  "display": "standalone"
}

Field reference

Field	Required	Description
name	Yes	Full name shown on install prompt and splash screen
short_name	Recommended	Shorter name shown under the home screen icon (keep under 12 chars)
icons	Yes	Array of icon objects; must include 192×192 and 512×512 for Chrome install
theme_color	Recommended	Colors the browser toolbar on Android; should match your brand color
background_color	Recommended	Background color of the splash screen while the app loads
display	Recommended	`standalone` removes browser UI; most apps use this
start_url	Recommended	URL to open when launched; defaults to `/`
description	Optional	Short description for app stores and install UI
lang	Optional	Primary language, e.g. `"en"`

How to link site.webmanifest

Place the file in your site root and add one line to every page's <head>:

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

That's it. Chrome on Android will detect it and may show an "Add to Home Screen" banner after repeated visits.

Display modes explained

browser — opens in a regular browser tab. No difference from a normal link.
minimal-ui — hides most browser UI but keeps navigation buttons.
standalone — removes browser UI completely. Looks like a native app. Most common for PWAs.
fullscreen — hides the status bar too. Used for games and immersive apps.

Maskable icons

For best appearance on Android, add a maskable icon — an icon designed so the important content is in the center "safe zone" and the edges can be cropped into any shape (circle, squircle, etc.):

{
  "src": "/android-chrome-512x512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

Our favicon generator adds solid background padding to your icon, making it naturally compatible as a maskable icon.

Generate site.webmanifest automatically

Every download from our favicon generator includes a ready-to-use site.webmanifest referencing the correct PNG files. Edit the name, short_name, and theme_color fields to match your brand, place the file in your root, and you're done.

site.webmanifest: What It Is, What Goes In It, and Why You Need It