How to Create a Web App Manifest

You have made a mobile-friendly site and want it to feel coherent when someone installs it from their browser. Without a web app manifest, the installed name may be awkward, the browser has no declared theme colors, and the experience may open like an ordinary tab instead of the app-like display you intended.

Writing manifest.webmanifest by hand is not difficult, but it is easy to mix JavaScript object syntax with strict JSON, miss the difference between name and short_name, or point at an icon that does not exist. A PWA manifest generator gives you a valid starting structure to copy, then leaves the project-specific validation and icon work where they belong: in your codebase.

What a web app manifest controls

A web app manifest is a JSON document linked from a page’s HTML. It provides metadata a supporting browser can use when presenting or installing the site. Common members include the full application name, a shorter label for limited spaces, the URL to open, a preferred display mode, colors, and one or more icon descriptions.

The manifest does not turn a site into a complete Progressive Web App on its own. Installation behavior depends on the browser and platform, and a robust PWA normally needs secure delivery, working pages, suitable icons, and often a service worker for the desired offline experience. The manifest describes presentation and launch preferences; it does not implement caching or application logic.

The generator produces a draft similar to this structure:

{
  "name": "Trail Notes",
  "short_name": "Trails",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2f6fed",
  "background_color": "#ffffff",
  "icons": [{
    "src": "/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

Why people get stuck here

The two name fields are easy to duplicate without thought. name can be descriptive, while short_name should still make sense when the operating system has little room under an icon. Truncating a long brand name automatically can produce an unclear label.

Relative URLs cause another set of surprises. A start_url of / points to the origin root, which may be correct for a site deployed at the domain root and wrong for an application living under a subpath. Icon paths must also resolve from the deployed site, not merely from a local source directory.

Display mode is a preference rather than a universal guarantee. standalone aims for an app-like window without normal browser chrome, minimal-ui requests limited navigation controls, and browser keeps the ordinary browsing interface. Support and presentation can vary by browser, so test the installed result on the platforms you care about.

What a good manifest looks like

Every path exists in production

Open the start URL and icon URL against the deployed origin. A syntactically correct manifest with a missing icon is still incomplete. The generator intentionally inserts /icon-192.png as a draft entry; you must create or replace that file reference.

Colors match their jobs

theme_color can influence surrounding browser or operating-system UI, while background_color may be used during launch. Choose colors that fit your interface and keep enough contrast for any content that appears against them.

The manifest is only one checklist item

Run a broader PWA review after adding the file. This core PWA requirements guide helps separate manifest metadata from secure delivery, service-worker behavior, responsive layout, and install testing.

Common mistakes to avoid

• Saving JavaScript syntax with comments or trailing commas instead of valid JSON.
• Leaving the sample icon entry unchanged when /icon-192.png does not exist.
• Using a root start URL for an application deployed in a subdirectory.
• Assuming standalone will render identically on every browser and operating system.
• Adding the file but forgetting the <link rel="manifest" href="..."> element in the page head.

How to do it with PWA Manifest Generator

Use the PWA Manifest Generator to build a small, readable draft in your browser.

1. Enter the full app name and a sensible short name.
2. Set the start URL for the deployed application.
3. Choose standalone, minimal-ui, or browser as the display preference.
4. Select the theme and background colors.
5. Review the generated JSON and select Copy.
6. Save it in your project, update the icon entries, and link the manifest from your HTML.

The preview updates as you edit and produces formatted JSON. It does not upload project details, create image files, validate URLs, or install a service worker. After copying, check the JSON, serve it with an appropriate manifest or JSON content type, and inspect it through browser developer tools.

Other project helpers are available in the online tool directory when you need to prepare icons, colors, or supporting web files.

Frequently asked questions

Should the file be named manifest.json or manifest.webmanifest?

Either can work when it is linked correctly and served with a suitable content type. manifest.webmanifest makes the file’s purpose clear, while many projects use manifest.json by convention.

Does a manifest make my website work offline?

No. Offline behavior normally depends on a service worker and an intentional caching strategy. The manifest supplies installation and presentation metadata rather than network handling.

How many icon sizes should I include?

The generator provides one 192×192 placeholder entry, but production requirements vary across platforms. Add the actual sizes and formats required by your target browsers, make sure each file exists, and consider a maskable icon where appropriate.

Final thought

A generated manifest is valuable because it removes the blank-page problem, not because it finishes the PWA. Copy the draft, replace every placeholder, test deployed paths, and verify the installed experience on real target devices.

Try the free PWA Manifest Generator tool