 François Beaufort [GitHub](https://github.com/beaufortfrancois)  Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/)  Thomas Steiner [GitHub](https://github.com/tomayac) [LinkedIn](https://www.linkedin.com/in/thomassteinerlinkedin) [Mastodon](https://toot.cafe/@tomayac) [Bluesky](https://bsky.app/profile/tomayac.com) [Homepage](https://blog.tomayac.com/)  Alexey Rodionov [X](https://twitter.com/alexey_rodionov) [GitHub](https://github.com/FluorescentHallucinogen) [LinkedIn](https://www.linkedin.com/in/alexey-rodionov)
A web app manifest is a JSON file that tells the browser how your
Progressive Web App (PWA) should behave when installed on the user's desktop or
mobile device. At minimum, a typical manifest file includes:
- The app's name
- The icons the app should use
- The URL that should be opened when the app launches
> [!NOTE]
> **Note:** Users can install your web app even if it doesn't meet the [installability criteria](https://web.dev/articles/install-criteria) in Chrome. Check out [How Chrome helps users install the apps they value](https://developer.chrome.com/blog/how_chrome_helps_users_install_the_apps_they_value#manual_installation_of_any_app) to learn more.
## Create the manifest file
The manifest file can have any name, but it's commonly named `manifest.json` and
served from the root (your website's top-level directory). The specification
suggests the extension should be `.webmanifest`, but you might want to use JSON
files to make your manifests clearer to read.
A typical manifest looks like this:
{
"short_name": "Weather",
"name": "Weather: Do I need an umbrella?",
"icons": [
{
"src": "/images/icons-vector.svg",
"type": "image/svg+xml",
"sizes": "512x512"
},
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"id": "/?source=pwa",
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "How's the weather today?",
"short_name": "Today",
"description": "View weather information for today",
"url": "/today?source=pwa",
"icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
},
{
"name": "How's the weather tomorrow?",
"short_name": "Tomorrow",
"description": "View weather information for tomorrow",
"url": "/tomorrow?source=pwa",
"icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
}
],
"description": "Weather forecast information",
"screenshots": [
{
"src": "/images/screenshot1.png",
"type": "image/png",
"sizes": "540x720",
"form_factor": "narrow"
},
{
"src": "/images/screenshot2.jpg",
"type": "image/jpg",
"sizes": "720x540",
"form_factor": "wide"
}
]
}
### Key manifest properties
#### `short_name` and `name`
You must provide at least one of `short_name` or `name` in your manifest. If
you provide both, `name` is used when the app is installed, and `short_name` is
used on the user's home screen, launcher, or other places where space is
limited.
> [!NOTE]
> **Note:** Operating systems usually expect to have a title for each app window. This title is displayed in various window-switching surfaces such as `alt`+`tab`, overview mode, and the shelf window list. For PWAs running in standalone mode, Chromium adds the `short_name` (or, if that's not available, the `name`) to the start of the HTML document's `` to prevent disguise attacks where standalone apps might try to be mistaken, for example, for operating system dialogs. To help keep your app secure, don't repeat the app name in the `<title>` for standalone mode.
#### `icons`
When a user installs your PWA, you can define a set of icons for the browser
to use on the home screen, app launcher, task switcher, splash screen, and in
other places.
The `icons` property is an array of image objects. Each object must
include the `src`, a `sizes` property, and the `type` of image. To use
[maskable icons](https://web.dev/articles/maskable-icon), sometimes referred to as adaptive
icons on Android, add `"purpose": "any maskable"` to the `icon` property.
For Chromium, you must provide at least a 192x192 pixel icon and a
512x512 pixel icon. If only those two icon sizes are provided, Chrome
automatically scales the icons to fit the device. If you'd prefer to scale your
own icons, and adjust them for pixel-perfection, provide icons in increments
of 48dp.
> [!NOTE]
> **Note:** Chromium-based browsers also support SVG icons that can be scaled arbitrarily without looking pixelated and that support advanced features like [responsiveness to `prefers-color-scheme`](https://blog.tomayac.com/2021/07/21/dark-mode-web-app-manifest-app-icons/). However, these icons stay in the state they were in at install time, instead of updating live. To use SVG icons safely, always specify a rasterized icon as a fallback for browsers that don't support SVG icons.
#### `id`
The `id` property lets you explicitly define the identifier used for your
application. Adding the `id` property to the manifest removes the dependency on
the `start_url` or the location of the manifest, and makes it possible to update
them in the future. For more information, see
[Uniquely identifying PWAs with the web app manifest ID property](https://developer.chrome.com/blog/pwa-manifest-id).
#### `start_url`
The `start_url` is a required property. It tells the browser where your
app should start when it launches, and prevents the app from starting on
whatever page the user was on when they added your app to their home screen.
Your `start_url` should direct the user straight into your app, not a product
landing page. Think about what the user will want to do immediately after they
open your app, and place them there.
#### `background_color`
The `background_color` property is used on the splash screen when the
application launches on mobile for the first time.
#### `display`
You can customize what browser UI is shown when your app is launched. For
example, you can hide the address bar and browser user interface elements. Games
can even be made to launch in full screen. The `display` property takes one of
the following values:
| Property | Behavior |
|---|---|
| `fullscreen` | Opens the web app without any browser UI and takes up all of the available display area. |
| `standalone` | Opens the web app to look and feel like a standalone app. The app runs in its own window, separate from the browser, and hides standard browser UI elements such as the address bar.  The standalone UI. |
| `minimal-ui` | This mode is similar to `standalone`, but provides the user with a minimal set of UI elements for controlling navigation, such as the back and reload buttons.  The minimal UI. |
| `browser` | A standard browser experience. |
#### `display_override`
To choose how your web app is displayed, set a `display` mode in its manifest as
[explained earlier](https://web.dev/articles/add-manifest#display). Browsers aren't required to support all display
modes, but they *are* required to support the
[spec-defined fallback chain](https://w3c.github.io/manifest/#dfn-fallback-chain)
(`"fullscreen"` → `"standalone"` → `"minimal-ui"` → `"browser"`). If they don't
support a given mode, they fall back to the next display mode in the chain. In
rare cases, these fallbacks can cause problems. For example, a developer can't
request `"minimal-ui"` without being forced back into the `"browser"` display
mode when `"minimal-ui"` is not supported. The current behavior also makes it
impossible to introduce new display modes in a backwards-compatible way,
because they don't have a place in the fallback chain.
You can set your own fallback sequence using the `display_override` property,
which the browser considers *before* the `display` property. Its value is a
sequence of strings that are considered in the listed order, and the first
supported display mode is applied. If none are supported, the browser falls back
to evaluating the `display` field. If there's no `display` field, the browser
ignores `display_override`.
The following is an example of how to use `display_override`. The details of
[`"window-control-overlay"`](https://web.dev/articles/window-controls-overlay) are out of scope
for this page.
{
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
}
When loading this app, the browser tries to use `"window-control-overlay"`
first. If that's unavailable, it falls back to `"minimal-ui"`, and then to
`"standalone"` from the `display` property. If none of these are available, the
browser then returns to the standard fallback chain.
#### `scope`
The `scope` of your app is the set of URLs that the browser considers part of
your app. `scope` controls the URL structure that includes all entry and exit
points to the app, and the browser uses it to determine when the user has left
the app.
> [!CAUTION]
> **Caution:** If the user clicks a link in your app that navigates outside the `scope`, the link opens and renders within the existing PWA window. If you want the link to open in a browser tab, add `target="_blank"` to the `<a>` tag. On Android, links with `target="_blank"` open in a [Chrome Custom Tab](https://developer.chrome.com/multidevice/android/customtabs).
A few other notes on `scope`:
- If you don't include a `scope` in your manifest, then the default implied `scope` is the start URL, but with its filename, query, and fragment removed.
- The `scope` attribute can be a relative path (`../`), or any higher level path (`/`) that would allow for an increase in coverage of navigations in your web app.
- The `start_url` must be in the scope.
- The `start_url` is relative to the path defined in the `scope` attribute.
- A `start_url` starting with `/` will always be the root of the origin.
#### `theme_color`
The `theme_color` sets the color of the tool bar, and can be reflected in
the app's preview in task switchers. The `theme_color` should match the
`meta` theme color specified in your document head.
 An example of a PWA window with custom `theme_color`.
#### `theme_color` in media queries
Browser Support
- ' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E)
- ' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E)
- ' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E)
- ' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E)
[Source](https://developer.mozilla.org/docs/Web/API/HTMLMetaElement/media)
<br />
You can adjust `theme_color` in a media query using the `media` attribute of the
`meta` theme color element. For example, you can define one color for light mode
and another one for dark mode in this way. However, you can't define these
preferences in your manifest. For more information, see
[the w3c/manifest#975 GitHub issue](https://github.com/w3c/manifest/issues/975).
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
#### `shortcuts`
The `shortcuts` property is an array of [app shortcut](https://web.dev/articles/app-shortcuts)
objects that provide quick access to key tasks within your app. Each member
is a dictionary that contains at least a `name` and a `url`.
#### `description`
The `description` property describes the purpose of your app.
In Chrome, the maximum description length is 300 characters on all platforms.
If the description is longer than that, the browser truncates it with an
ellipsis character. On Android, the description must also use a maximum of
seven lines of text.
#### `screenshots`
The `screenshots` property is an array of image objects representing your app
in common usage scenarios. Each object must include the `src`, a `sizes`
property, and the `type` of image. The `form_factor` property is optional.
You can set it either to `"wide"` for screenshots applicable to wide screens
only or `"narrow"` for only narrow screenshots.
In Chrome, the image must meet the following criteria:
- Width and height must be at least 320 px and at most 3840 px.
- The maximum dimension can't be more than 2.3 times the length of the minimum dimension.
- All screenshots matching the appropriate form factor must have the same aspect ratio.
- From Chrome 109, only screenshots with the `form_factor` set to `"wide"` are displayed on desktop.
- From Chrome 109, screenshots with the `form_factor` set to `"wide"` are ignored on Android. Screenshots without `form_factor` are still displayed for backwards compatibility.
Chrome on desktop displays at least one and at most eight screenshots that meet
these criteria. The rest are ignored.
Chrome on Android displays at least one and at most five screenshots that meet
these criteria. The rest are ignored.
 Richer installation UI on desktop and mobile.
## Add the web app manifest to your pages
After creating the manifest, add a `<link>` tag to all the pages of your
Progressive Web App. For example:
<link rel="manifest" href="/manifest.json">
> [!TIP]
> The request for the manifest is made **without** credentials, even if it's on the same domain. If the manifest requires credentials, you must include `crossorigin="use-credentials"` in the manifest tag.
## Test your manifest
To verify your manifest is set up correctly, use the **Manifest** pane in the
**Application** panel of Chrome DevTools.
 Test your manifest in DevTools.
This pane provides a human-readable version of many of your manifest's
properties, and lets you verify that all of the images are loading
properly.
## Splash screens on mobile
When your app first launches on mobile, it can take a moment for the browser
to start and the initial content to begin rendering. Instead of showing a
white screen that might make the user think the app isn't working, the browser
shows a splash screen until the first paint.
Chrome automatically creates the splash screen from the `name`,
`background_color`, and `icons` specified in your manifest. To create a smooth
transition from the splash screen to the app, make you `background_color` the
same color as the load page.
Chrome chooses the icon that most closely matches the device resolution for the
splash screens. Providing 192px and 512px icons is sufficient for most cases,
but you can provide additional icons for a better match.
## Further reading
To learn about other properties you can add to your web app manifest, refer to
the [MDN Web App Manifest documentation](https://developer.mozilla.org/docs/Web/Manifest).