The web app manifest is the JSON file (manifest.json) that tells browsers how to install your app — its name, icons, theme colour, start URL, display mode and more. Customising it is essential to a polished PWA installation experience.
Manifest Fields
- name: Full app name (used in app stores and install prompts).
- short_name: Truncated name used on home screens (max 12 chars).
- description: One-sentence app description.
- icons: Array of icons at different sizes (192×192 and 512×512 are essential).
- theme_color: Browser chrome colour when the app is open.
- background_color: Splash screen colour during launch.
- start_url: Where the app opens on launch.
- display: standalone (preferred), fullscreen, minimal-ui or browser.
- orientation: portrait, landscape, any.
- scope: Which URLs are part of the app (anything outside opens in a normal browser).
- categories: App-store-style categories.
- shortcuts: Long-press actions (Android).
Icon Requirements
- Minimum 192×192 (required for install).
- 512×512 strongly recommended (used for splash screen).
- 1024×1024 nice to have for high-DPI displays.
- Maskable icon — has safe zone so OS-imposed masking doesn't crop the design.
- SVG icon optional but improves crispness at all sizes.
Worked Examples
- SaaS dashboard: name “Acme Workspace”, short “Acme”, theme #0066cc, start URL /dashboard, display standalone.
- Field service: name “TechApp”, short “TechApp”, theme #FF9900, start URL /jobs/today, shortcuts for “New job”, “Today's route”.
- Marketplace: name “MarketHub Seller”, theme branded colour, categories ["business", "shopping"], maskable icon for clean Android home screen.
- Internal tool: name “Ops Hub”, short “Ops”, theme dark, background dark — looks like a serious tool.
Tip: Test the install on real devices, especially iOS — Apple's installation UI differs from Chrome's and reveals issues that desktop preview doesn't show.