Make Your Site Installable: The Web App Manifest
July 10, 2026 · DevTools
A Progressive Web App can be installed to a phone's home screen or a desktop like a native app. The thing that makes that possible is a small JSON file: the web app manifest.
What the manifest controls
The manifest tells the browser how your app should look and behave once installed:
{
"name": "My Awesome App",
"short_name": "MyApp",
"start_url": "/",
"display": "standalone",
"theme_color": "#2563eb",
"background_color": "#ffffff",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
name/short_name— the full name and the (truncated) label under the icon.display—standaloneopens in its own window with no browser chrome;browserbehaves like a normal tab.theme_color— colors the status bar / title bar.background_color— the splash-screen background while the app loads.start_url— where the app opens from the home screen.
The install criteria
Browsers only show the install prompt when a few boxes are ticked: the manifest is linked, the app is served over HTTPS, a service worker is registered, and — the one people miss — the icons array includes at least a 192×192 and a 512×512 PNG. Android additionally wants a maskable icon ("purpose": "any maskable") so the icon fills its adaptive shape cleanly.
Link it
Add one line to your <head>:
<link rel="manifest" href="/manifest.json">
Generate a valid manifest with the correct icon entries using the PWA Manifest Generator, then produce the icon files themselves with the Favicon Pack Generator.