A web manifest is a JSON file that tells a browser how a web application should look and behave when installed on a device. It supplies details such as the app name, icons, launch URL, display mode, and color settings. It supports progressive web app experiences but does not by itself make an app work offline or guarantee installation in every browser.
Web Manifest
What Is a Web Manifest?
A web manifest is a JSON file that tells a browser how a web app should look and behave when installed. Usually named manifest.json or site.webmanifest, it provides metadata rather than application code, including the installed name, icon, opening page, and window style.
What a Manifest JSON File Controls
The manifest sets installation and presentation preferences. Support varies by browser and operating system.
| Property | Purpose |
|---|---|
| name and short_name | Set the full and compact installed app names. |
| icons | Provide icon files for home screens and app launchers. |
| start_url and scope | Choose where the app opens and which URLs belong to it. |
| display | Request a standalone, fullscreen, or browser-style window. |
| theme_color and background_color | Guide interface and launch-screen colors. |
| id and shortcuts | Help identify the app and offer quick entry points. |
How a Web Manifest Works
A browser finds the manifest through its URL, usually linked in the HTML document’s head.
- Create a valid JSON manifest file.
- Add icon assets at the declared paths.
- Host it with the site, using application/manifest+json where possible.
- Add a link element with rel="manifest" in the HTML head.
- Use browser developer tools to inspect and validate it.
- Test installation and launch behavior on target devices.
Web Manifest vs. Service Worker vs. Browser Metadata
These technologies can work together, but have different roles.
| Technology | Main role |
|---|---|
| Web manifest | Shapes the installed app’s identity and launch experience. |
| Service worker | Can cache files for offline use and manage network requests. |
| HTML meta tags | Provide page-level browser and social metadata. |
| Native app configuration | Controls a packaged iOS or Android application. |
Benefits of a Web Manifest
A manifest helps an installed web app feel more intentional.
- Creates consistent names and icons on a device.
- Controls the start location and preferred display mode.
- Supports installation when browser and platform criteria are met.
- Separates installed-app settings from application code.
Practical Limits and Browser Considerations
A manifest improves installation, but is not a complete PWA solution.
- It is optional for a conventional website.
- Browsers can ignore unsupported fields or apply their own install rules.
- It does not add offline access, push notifications, or app-store distribution by itself.
- A service worker is commonly needed for reliable offline behavior.
Web Manifest Best Practices for Progressive Web Apps
Test the installed app, not only the website in a browser tab.
- Use a stable id and deliberate start_url for each app.
- Provide clear icons in appropriate sizes, including maskable icons where relevant.
- Set scope narrowly enough to exclude unrelated pages.
- Validate JSON and confirm the manifest loads without redirects or errors.
- For a storefront or dashboard, verify standalone mode opens the correct signed-in destination.
Building Installable Web Apps with Emergent
For a PWA, plan manifest settings alongside routes, icons, caching, and deployment. An AI web app builder can help teams create the full application, while Emergent can support build and release workflows for installable experiences. For mobile-focused projects, its AI app builder provides a starting point for turning an app concept into a shipped product.
Start Building
on Emergent today
on Emergent today
Start Building
