| Property | Description | Required |
|---|---|---|
| name | Human-readable app name | Yes |
| short_name | Short name for the home screen | Recommended |
| description | Description of the app | Optional |
| start_url | URL loaded when launched | Yes |
| display | Display mode (fullscreen, standalone, minimal-ui, browser) | Yes |
| orientation | Default orientation | Optional |
| icons | Array of image objects | Yes |
| background_color | Splash screen background | Recommended |
| theme_color | Toolbar/taskbar color | Recommended |
| scope | Navigation scope of the app | Optional |
| id | Unique identifier for the app | Optional |
| categories | App store categories | Optional |
| iarc_rating_id | Content rating ID | Optional |
| screenshots | App screenshots for store listing | Optional |
Maskable icons are adaptive icons that fill the entire shape of the icon mask on Android. They ensure your icon looks great across different devices.
// SVG as maskable icon (concept)
// The safe zone is the inner 80% of the icon
// The outer 20% may be cropped by the mask
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}The splash screen is generated automatically from the manifest properties:
background_color as the backgroundname or short_name| Mode | Description |
|---|---|
| fullscreen | Hides all browser UI, fills the screen |
| standalone | Looks like a native app, hides browser chrome |
| minimal-ui | Shows minimal browser controls (back, forward, refresh) |
| browser | Opens in the regular browser tab |
<!-- In the HTML head -->
<link rel="manifest" href="/manifest.json">
<!-- Apple-specific meta tags (for iOS) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My PWA">
<link rel="apple-touch-icon" href="/icons/icon-192.png">
<link rel="apple-touch-startup-image" href="/splash.png">
<!-- Windows / IE meta tags -->
<meta name="application-name" content="My PWA">
<meta name="msapplication-TileColor" content="#4f46e5">
<meta name="msapplication-TileImage" content="/icons/icon-144.png">