Web App Manifest Cheat Sheet¶

This page condenses the web app manifest into one scannable reference: every member with its JSON type, default, effect on installability and browser support, a minimal and a fully annotated complete manifest, the legacy <meta> and <link> tags each member replaces, and every enumerated value you can type into the file. Use it when you are writing or reviewing a manifest and need the exact spelling, shape or constraint of a member right now. The full processing rules, error messages and gotchas behind each row live in the Members Reference; this page links there instead of repeating them.

Serving and linking the manifest¶

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

Serving details, dynamic manifests and the fetch pipeline are covered in Web App Manifest.

Minimal installable manifest¶

The smallest manifest that passes Chromium's installability check on desktop and Android, is honored by Safari on iOS, iPadOS and macOS, and by Firefox for Android:

{
  "name": "Pocket Notes",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

It works, but it leaves the app's identity tied to start_url, has no maskable icon (Android launchers will shrink the icon onto a white disc), no theme or splash colors, and no screenshots for Chrome's richer install dialog. Add these seven lines before you ship:

{
  "id": "/",
  "name": "Pocket Notes",
  "short_name": "Notes",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#f7f4ed",
  "theme_color": "#1f6f5c",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

What each browser needs before it will install or promote:

The criteria, error codes and history of the service-worker requirement are explained in Installability Criteria.

All members at a glance¶

Legend for Install: Required means Chromium's installability check fails without it; Recommended means installation works but the installed app is visibly worse; Blocks means a value that prevents promotion; — means no effect on installability.

Core members (W3C Web Application Manifest)¶

Application information members (W3C Group Note)¶

Integration and incubation members (Chromium)¶

Vendor-specific and legacy members¶

Support matrix¶

Support data as of September 2026. ✅ supported (first version), ❌ not supported, ⚠️ partial (see notes below the table). For live data see MDN's manifest reference and caniuse.com.

Notes on the ⚠️ cells: Safari honors only standalone and browser for display (fullscreen opens as standalone, minimal-ui as a browser tab before iOS 26). Safari uses manifest icons only when the page has no apple-touch-icon and only icons whose purpose is any or absent. Desktop Chromium parses orientation, but app windows don't rotate. window.launchQueue is not available on Android (Chrome or Samsung Internet, whose 21.0 entry MDN derives from Chromium 110), so launch_handler there has no script-visible effect. On desktop, share_target registers only on ChromeOS. Desktop browsers mostly ignore prefer_related_applications, except that desktop Chromium suppresses install promotion when related_applications lists a chrome_web_store entry (or a play entry on ChromeOS with Android apps); desktop Chromium also uses related_applications for getInstalledRelatedApps() (installed web apps from Chrome 140, Windows apps from 85). MDN has no data for screenshots in Samsung Internet. Chrome and Edge 85 to 95 supported shortcuts on Windows only. Chromium parses lang and dir: dir applies to shortcut text and lang is the fallback language of *_localized entries (148+). tab_strip shipped on ChromeOS only and is behind flags on other desktops; note_taking is parsed everywhere but used only on ChromeOS. Firefox on Windows (143+) reads a manifest, when present, for details such as the taskbar icon, but MDN's data records no member support there.

A fully annotated complete manifest¶

Every member below is valid and processed by at least one shipping browser, except where an annotation says otherwise. Click the numbered markers for the rule behind each line. The JSON stays valid when you copy it: the annotation comments are stripped from the copied text.

{
  "id": "/", // (1)!
  "name": "Acme Tasks: Team Planner", // (2)!
  "short_name": "Tasks", // (3)!
  "description": "Plan, assign and track team tasks, online or offline.", // (4)!
  "lang": "en-US", // (5)!
  "dir": "ltr", // (6)!
  "name_localized": { // (7)!
    "de": "Acme Aufgaben: Teamplaner",
    "fr": { "value": "Acme Tâches : planificateur", "lang": "fr" }
  },
  "start_url": "/?source=pwa", // (8)!
  "scope": "/", // (9)!
  "display": "standalone", // (10)!
  "display_override": ["window-controls-overlay", "standalone"], // (11)!
  "orientation": "any", // (12)!
  "theme_color": "#0b57d0", // (13)!
  "background_color": "#ffffff", // (14)!
  "color_scheme_dark": { "theme_color": "#0f172a", "background_color": "#020617" }, // (15)!
  "icons": [ // (16)!
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" },
    { "src": "/icons/maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/monochrome-512.png", "sizes": "512x512", "type": "image/png", "purpose": "monochrome" }
  ],
  "screenshots": [ // (17)!
    {
      "src": "/shots/board-wide.png", "sizes": "1920x1080", "type": "image/png",
      "form_factor": "wide", "label": "Task board with To do, Doing and Done columns"
    },
    {
      "src": "/shots/today-narrow.png", "sizes": "1080x2340", "type": "image/png",
      "form_factor": "narrow", "label": "Today's tasks on a phone"
    }
  ],
  "categories": ["productivity", "business"], // (18)!
  "shortcuts": [ // (19)!
    {
      "name": "New task", "short_name": "New", "description": "Create a task in your inbox",
      "url": "/tasks/new?source=shortcut",
      "icons": [{ "src": "/icons/shortcut-new-96.png", "sizes": "96x96", "type": "image/png" }]
    },
    {
      "name": "Today", "url": "/tasks/today?source=shortcut",
      "icons": [{ "src": "/icons/shortcut-today-96.png", "sizes": "96x96", "type": "image/png" }]
    }
  ],
  "launch_handler": { "client_mode": ["focus-existing", "auto"] }, // (20)!
  "share_target": { // (21)!
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title", "text": "text", "url": "url",
      "files": [{ "name": "attachments", "accept": ["image/png", "image/jpeg", ".png", ".jpg", ".jpeg"] }]
    }
  },
  "file_handlers": [ // (22)!
    {
      "action": "/open-board",
      "name": "Acme task board",
      "accept": { "application/vnd.acme.board+json": [".acmeboard"] },
      "launch_type": "single-client"
    }
  ],
  "protocol_handlers": [ // (23)!
    { "protocol": "web+tasks", "url": "/open?link=%s" }
  ],
  "scope_extensions": [ // (24)!
    { "type": "origin", "origin": "https://help.acme.example" }
  ],
  "related_applications": [ // (25)!
    { "platform": "play", "id": "com.acme.tasks", "url": "https://play.google.com/store/apps/details?id=com.acme.tasks" }
  ],
  "prefer_related_applications": false // (26)!
}

1. Identity. Resolved against the origin of start_url, so "/" means https://your.origin/. It is compared exactly (/app and /app/ are different apps) and should never change. If you shipped without id, copy the Computed App Id from DevTools (Application → Manifest) into this field instead. See App Identity & Updates.
2. Full name. Used in install dialogs, the app list, window titles and the Android splash screen. After installation, Chromium treats name changes as security-sensitive and asks the user to approve them.
3. Short name. Used where space is limited (home-screen label, launcher, task switcher). Launchers truncate long labels, so keep it to one short word or two.
4. Description. Defined in the Application Information Note, not the core spec. Chromium shows it in the richer install dialog; keep it to one or two sentences.
5. Language of the default strings. A BCP 47 tag, canonicalized (EN-us becomes en-US). It labels the default text; it does not translate anything.
6. Base direction of name, short_name and shortcut text: ltr, rtl or auto (default).
7. Localized names (Chrome and Edge 148+ on desktop). Each key is a language tag; the value is a string or { "value", "lang"?, "dir"? }. Browsers without support fall back to name. short_name_localized and icons_localized work the same way.
8. Launch URL. Resolved against the manifest URL; must be same-origin with the document and inside scope. The query parameter lets analytics count installed launches. Never put a user identifier here.
9. Navigation scope. Pages outside it get browser UI: desktop Chromium and Chrome for Android show a toolbar with the origin and a close button, iOS opens them in Safari View Controller, and macOS Safari web apps hand them to the default browser. Prefix matching is string-based, so end it with /. Not the same thing as the service worker scope.
10. Fallback display mode. One of fullscreen, standalone, minimal-ui, browser. This is the mode used by every browser that doesn't understand the first display_override entry.
11. Custom fallback chain (Chromium 89+). The first recognized value wins; enhanced modes such as window-controls-overlay and tabbed are only valid here. Safari and Firefox ignore this member.
12. Default orientation. any keeps tablets and foldables usable; lock only for games or camera tools. Baked into the WebAPK on Android.
13. Theme color. Title bar and status bar color. Any CSS color that converts to sRGB; alpha may be ignored. A <meta name="theme-color"> in an in-scope page overrides it.
14. Splash background. Used only while the app loads (Android splash screen). Match your CSS body background to avoid a flash.
15. Dark-scheme overrides. In the W3C spec but not implemented by any browser as of September 2026. Harmless to include; keep the <meta name="theme-color" media="(prefers-color-scheme: dark)"> tag until it ships.
16. Icons. At least one any icon of 144 px or more (192 and 512 recommended) for Chromium; separate maskable files with the logo inside the central 80 % circle; optional monochrome for platforms that tint icons. Never combine "any maskable" in one entry. See Icons & Maskable Icons.
17. Screenshots for Chrome's richer install UI: wide for desktop, narrow (or none) for Android; 320 to 3,840 px per side, long side at most 2.3 times the short side, at most 8 considered, and a label for each. On Android every narrow screenshot must share the first one's aspect ratio, and wide entries still count toward the 8, so list narrow screenshots first. See Rich Install UI.
18. Store categories. Lowercase strings from the known list below. Advisory only; Safari on macOS uses them to name Launchpad folders.
19. Shortcuts. name and an in-scope url are required. Chromium reads at most the first 10 array entries, and Chrome for Android keeps only the first four. Put the most important first. See App Shortcuts.
20. Launch behavior (Chromium desktop). The first recognized client_mode wins; with focus-existing your page must consume window.launchQueue.
21. Share target. Files require POST with multipart/form-data. One invalid MIME type in accept drops the whole member in Chromium. Your service worker or server must handle the POST to action. See Web Share Target.
22. File handlers (Chromium desktop). accept maps MIME types to extension lists that start with .; files arrive as FileSystemFileHandle objects through window.launchQueue. See File Handling.
23. Protocol handlers (Chromium desktop). A safelisted scheme or web+ plus ASCII letters; url must be in scope and contain %s. The user approves the registration on first use.
24. Scope extensions (Chrome and Edge 139+ desktop). Each listed origin must confirm with /.well-known/web-app-origin-association keyed by this app's processed id.
25. Related native apps. Used by Chromium on Android for Play Store promotion (with prefer_related_applications: true; desktop Chromium only honors it for a chrome_web_store entry, or play on ChromeOS) and by navigator.getInstalledRelatedApps(). Harmless when you have no native app; omit it then.
26. Keep false (the default) unless you want Android users sent to the Play Store instead of installing the PWA. A JSON string "false" is ignored, not interpreted.

Sub-object shapes¶

Image resource (icons, screenshots, shortcuts[].icons)¶

Shortcut item¶

share_target¶

file_handlers[]¶

protocol_handlers[]¶

launch_handler, scope_extensions, related_applications, migrate_from¶

Value lists¶

display and display_override values¶

The standard fallback chain is fullscreen → standalone → minimal-ui → browser: when a browser can't provide the requested mode, it tries the next one. display_override replaces that chain with your own list, and the browser then falls back to display. The matching CSS media feature is @media (display-mode: <value>), which also has a picture-in-picture value that is not a manifest value.

orientation values¶

These are the Screen Orientation API's lock types. screen.orientation.lock() can change the orientation at runtime where locking is allowed, and unlock() returns to the manifest value. WCAG 2.2 success criterion 1.3.4 (Orientation, level AA) forbids locking unless a specific orientation is essential.

Icon purpose values¶

Combining tokens ("any maskable") is valid syntax, but it makes the same padded image appear small wherever it's used unmasked. Ship separate files.

categories known values¶

The W3C Application Information Note lists these known categories; the member accepts any string, but stores recognize these, and lowercase is recommended:

beauty, books, books & reference, business, cars, dating, design, developer, developer tools, development, education, entertainment, events, fashion, finance, fitness, food, fundraising, games, government, graphics, graphics & design, health, health & fitness, kids, lifestyle, magazines, medical, multimedia, multimedia design, music, navigation, network, networking, news, parenting, personalization, pets, photo, photo & video, politics, productivity, reference, security, shopping, social, social networking, sports, transportation, travel, utilities, video, weather.

screenshots form_factor and platform values¶

Chromium does not read platform. Use it only for screenshots that show platform-specific features.

launch_handler.client_mode values¶

share_target methods and encodings¶

dir values¶

ltr, rtl, auto (default). Write every enumerated manifest value in lowercase exactly as listed on this page; don't rely on any engine normalizing case.

URL resolution rules¶

"Within scope" is a string-prefix test on the processed URLs. "scope": "/app" also matches /apple; end scopes with /. Details: App Identity & Updates.

Legacy and iOS meta tags: equivalence table¶

Before manifests, every vendor invented <meta> and <link> tags. Some still matter, some are fallbacks, some are dead weight:

A head that covers every engine without redundancy:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="manifest" href="/app.webmanifest">

<!-- Light and dark theme colors: the manifest's color_scheme_dark isn't implemented yet. -->
<meta name="theme-color" content="#0b57d0" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

<!-- Tab icons. -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icons/icon.svg" type="image/svg+xml">

<!-- Safari uses this instead of manifest icons: 180x180, opaque, square corners. -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

<!-- Optional Safari refinements for Home Screen web apps. -->
<meta name="apple-mobile-web-app-title" content="Tasks">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Splash screens per device and status-bar handling are covered in Splash Screens & Theming and iOS & iPadOS.

Size and count limits¶

What changes after installation¶

Manifest edits reach installed apps through the browser's update process, not instantly:

Replacing an icon file in place without changing its URL never reaches desktop Chromium users. Publish new icons under new URLs. The full model is in App Identity & Updates.

Common validation mistakes¶

Debugging a manifest quickly¶

• Chrome and Edge: DevTools → Application → Manifest shows every processed member, the computed app ID, parser warnings (prefixed Manifest: in the console) and installability errors. The Identity section's Computed App Id is the value to copy into id.
• Safari: connect Web Inspector to the device; Safari has no manifest pane, so check the Home Screen result directly. Remember that apple-touch-icon overrides manifest icons.
• Firefox: DevTools → Application → Manifest displays the parsed members and icons, even though desktop Firefox doesn't install from manifests.
• CI: use the Chrome DevTools Protocol's Page.getAppManifest and Page.getInstallabilityErrors, as shown in Installability Criteria, or the tools in Browser DevTools and Automated Testing.

Further reading¶

On this site

• Members Reference: processing rules, error messages and gotchas for every member
• Web App Manifest: serving, linking and generating manifests
• Icons & Maskable Icons
• Display Modes
• App Identity & Updates
• Advanced & Integration Members
• Installability Criteria
• Production Checklist

External references

• W3C: Web Application Manifest
• W3C: Web App Manifest – Application Information
• WICG: Manifest Incubations
• MDN: Web app manifests reference
• web.dev: Add a web app manifest
• Chrome for Developers: Improvements to web app updates
• Microsoft Learn: Get started developing a PWA