A web app manifest is a JSON file that tells the browser details such as an app’s name, icon, and preferred launch URL. Understanding what a manifest.json file does helps when configuring an installable web app and diagnosing why its icon or launch page is missing.
What Is Manifest.json in a Web App?
What is manifest.json used for? It supplies metadata that a browser can use when presenting and launching a web app. The file is commonly named manifest.json, though .webmanifest is also used. Its contents are a JSON object; it is linked from the page rather than executed as JavaScript.
The manifest JSON describes preferences, not a promise that every browser will present them identically. Installation requirements and support vary by browser and platform. A manifest alone also does not make an app work offline: that behavior needs an appropriate caching strategy, commonly implemented with a service worker.
Create a Small Manifest
Place this example at /manifest.json on the same origin as the site:
{
"name": "Trail Notes",
"short_name": "Trails",
"start_url": "/",
"display": "standalone",
"icons": [
{ "src": "/icons/app-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/app-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Create actual PNG files at the two icon paths with the declared dimensions. name is the full app name; short_name is a shorter alternative for limited space. start_url suggests where to open the app when launched from its installed entry. display: standalone requests an app-like window; the browser decides how to apply the display mode.
The icons array gives the browser candidate images. Different devices and browsers can select different candidates, so inspect the chosen image and supply appropriate sizes for your targets. This example is a starting configuration, not a complete guarantee of installability. Consult the web app manifest reference for member definitions and check the target browser’s current requirements.
Link It from HTML
Add this element inside the document’s <head>:
<link rel="manifest" href="/manifest.json">
Use the actual deployed location if the file is elsewhere. A root-relative path begins at the origin’s root; it may be wrong for a project hosted under a subdirectory. If the HTML page is at /app/index.html and the manifest is at /app/manifest.json, use /app/manifest.json in the link. Put the link on the app pages that need it.
The link URL is resolved against the document URL. Relative icon paths and start_url values in the manifest are resolved against the manifest URL, so moving the file can change their destinations. In the example, root-relative paths keep their destinations explicit. Confirm that the launch URL stays on the app’s origin and leads to the intended page.
Check Loading and JSON Errors
Serve the project over a local web server or HTTPS and open the page in the browser. In Chrome DevTools, open Application, then Manifest. The panel shows the processed name, icons, start URL, and any reported errors or warnings. Other browsers may expose different inspection tools.
If the manifest is absent, open the Network panel, reload, and inspect the manifest request. A 404 points to a path or deployment problem; an HTML error page returned with a successful status is not a valid manifest either. Follow the link URL and verify the response body and content type. Check individual icon requests if the manifest loads but an icon does not.
For a parse error, verify double quotes around keys and strings, commas between members, and no trailing comma after the last item. A syntactically valid JSON file can still have an invalid member or a broken URL, so inspect both the response and the processed values.
After correcting the file or paths, reload the page and return to Application → Manifest. Confirm the displayed name, icon, and start URL match the deployed app, and resolve any remaining errors before testing installation.