Web App Manifest: Overview

What is the Web App Manifest?

The Web App Manifest is a JSON file that tells the browser how your web application should look and behave when it is installed on a device. It controls the app name, icons, launch URL, display mode, theme colours, and more — everything the operating system needs to treat your site like a native app.

The manifest is the cornerstone of installability. Without it, browsers will not offer users an “Add to Home Screen” prompt, and your app will not appear in the device’s app launcher.

Linking the manifest

Add a single <link> tag inside the <head> of every HTML page:

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

The file extension .webmanifest is the official MIME type (application/manifest+json). You may also use .json, but .webmanifest is preferred because it signals intent clearly to browsers and tooling.

How the browser uses it

flowchart LR
  H["HTML page"] -->|"<link rel=manifest>"| M["manifest.webmanifest"]
  M -->|"name / icons / start_url"| OS["OS / Browser Install UI"]
  OS -->|"icon + name"| HS["Home Screen"]
  OS -->|"start_url + display"| App["Standalone App Window"]

How the manifest connects your HTML to the installed app experience

What this module covers

This module walks you through every part of the manifest in five lessons:

Overview (this page) — what the manifest is and how to link it.
Manifest basics — the essential fields every manifest must have.
Icons and maskable icons — providing icons for every platform and the safe-zone rule.
Display and theme — controlling how the app window looks after installation.
Install prompt — intercepting the browser’s install event and building your own install button.