---
title: Web App Manifest Guide: A Real manifest.json, Field by Field
description: A working web app manifest explained field by field: name, icons, theme_color, background_color, display, and start_url, with the link tag to load it.
canonical: https://favicontools.com/blog/web-app-manifest-guide
---

# Web App Manifest Guide: A Real manifest.json, Field by Field

The web app manifest is a small JSON file that tells the OS how to install your site: its name, its icons, and its colors. Here is a real one, field by field.

> **Short answer:** A web app manifest is a JSON file with your app name, an icons array (192 and 512, plus a maskable one), theme_color, background_color, display, and start_url. Save it as manifest.json, then load it with <link rel="manifest" href="/manifest.json">.

## What the manifest is for

The manifest is what turns a website into something the OS can install. When a user adds your site to a home screen, the browser reads the manifest to decide the icon, the name under it, the splash screen, and whether the app opens with or without browser chrome.

It is plain JSON. You need one file, linked from every page, plus the icon PNGs it points at. Every field below maps to something a user sees.

## The fields that matter

| Field | What it controls |
| --- | --- |
| name | The full app name, shown on the install prompt and splash screen |
| short_name | The name under the home-screen icon, where space is tight |
| icons | The icon set. Include 192 and 512 PNGs, plus one marked maskable for Android shapes |
| theme_color | The color of the OS UI around the app, like the status bar |
| background_color | The splash-screen background shown while the app loads |
| display | How the app opens. standalone hides browser chrome so it feels native |
| start_url | The page the app opens to when launched from the home screen |

## A complete manifest.json

```json
{
  "name": "Acme Dashboard",
  "short_name": "Acme",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0b0b0f",
  "background_color": "#0b0b0f",
  "display": "standalone",
  "start_url": "/"
}
```

Two standard icons and one maskable, so Android can crop to any launcher shape without clipping your logo.

## Wire it into your pages

```html
<link rel="manifest" href="/manifest.json">
```

Put this in the <head> of every page. Without the link tag, the file exists but nothing reads it.

> **Icons here are separate from your tab favicon:** The manifest icons drive install prompts and home screens. Your browser tab still uses the favicon and PNG link tags. You need both sets, they are not interchangeable.

## Common questions

### What is a web app manifest?

A small JSON file that tells the browser and OS how to install your site: its name, icons, colors, and how it should open. It is what makes a page installable to a home screen.

### What is the difference between theme_color and background_color?

theme_color tints the OS UI around the app, like the status bar. background_color fills the splash screen shown while the app loads. They are often the same value, but they control different surfaces.

### Where do I put manifest.json?

Serve it from a stable path like your site root, then reference it with <link rel="manifest" href="/manifest.json">. The icons it lists must resolve from the paths in the src fields.

### Do I need a manifest for a normal website?

Only if you want install prompts and home-screen icons. A plain informational site works fine without one, but any site users might save to a phone benefits from it.