Web app manifests

A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application.

The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the app's name and icon.

A web application manifest contains a single JSON object where the top-level keys are called members.

Members

This section lists the members that may appear in the manifest.

All members are optional in the specification, but some applications require some members to be present. For example, PWAs must provide certain manifest members.

Note: The dir, lang, and iarc_rating_id members are not implemented.

Example manifest

json
{
  "short_name": "MDN",
  "name": "MDN Web Docs",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Deploying a manifest

Web app manifests are deployed in your HTML pages using a <link> element in the <head> of a document:

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

The .webmanifest extension is specified in the Media type registration section of the specification (the response of the manifest file should return Content-Type: application/manifest+json). Browsers generally support manifests with other appropriate extensions like .json (Content-Type: application/json).

If the manifest requires credentials to fetch, the crossorigin attribute must be set to use-credentials, even if the manifest file is in the same origin as the current page.

html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

Splash screens

In some browsers and operating systems, a splash screen is displayed when an installed PWA is launched. This splash screen is automatically generated and its appearance is defined by members in the web app manifest, specifically:

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background_color
description
display
display.browser
display.fullscreen
display.minimal-ui
display.standalone
display_override
Experimental
tabbed display mode
Experimental
window-controls-overlay display mode
Experimental
file_handlers
Experimental
icons
id
launch_handler
Experimental
launch_handler.client_mode
Experimental
name
note_taking
Experimental
note_taking.new_note_url
Experimental
orientation
prefer_related_applications
Experimental
protocol_handlers
Experimental
protocol_handlers.protocol
Experimental
protocol_handlers.url
Experimental
related_applications
Experimental
scope
serviceworker
ExperimentalNon-standard
serviceworker.scope
ExperimentalNon-standard
serviceworker.src
ExperimentalNon-standard
serviceworker.use_cache
ExperimentalNon-standard
share_target
Experimental
short_name
shortcuts
start_url
theme_color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

See also