Web App Manifest Generator – Build a Valid manifest.json for Your PWA

Use the free Web App Manifest Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.

What Is a Web App Manifest?

A web app manifest is a small JSON file, usually named manifest.json, that tells the browser what your web app is called, how it should look when installed, and where it starts. It is the file that turns a website into an installable app, often called a progressive web app or PWA. With a manifest, plus a service worker and HTTPS, browsers offer an install button, and the app opens in its own window, with its own icon, instead of inside a browser tab.

The manifest holds the app name, the short name shown on home screens, the start URL, the display mode, the theme and background colors, a description, and the icons. Each field is small on its own, but together they decide whether installation feels polished or broken. A missing icon means a generic placeholder. A wrong start URL means the installed app opens on the wrong page. A short name that is too long gets cut off on the home screen. The generator above builds the file and warns you about these problems before you publish.

How to Use the Generator

Fill in the app name and short name first. The name is the full title shown in app stores and install prompts. The short name is the label under the home screen icon, so keep it at twelve characters or fewer, or the system will trim it. Set the start URL to the page the app should open on, usually the root path. Choose a display mode: standalone is the usual choice, opening without browser chrome; fullscreen hides even the status bar; minimal-ui keeps a few browser controls; browser just opens a normal tab.

Pick theme and background colors that match your design. The theme color tints the browser toolbar and the task switcher. The background color fills the screen while the app loads, so a mismatch here shows as a flash of the wrong color on every launch. Add a description in one sentence, and enter URLs for the 192 pixel and 512 pixel icons. Press Generate, check the warnings, and download the file as manifest.json. Then link it from your pages with a link tag in the head pointing at the file, and serve everything over HTTPS.

Icons and Installability

Icons are where most manifests fail. Browsers require real PNG files at the sizes you declare, and they check them during installability tests. A 192 pixel icon and a 512 pixel icon cover the standard requirement, and the 512 pixel icon should also be maskable, meaning it still looks right when the system crops it into a circle or rounded square. Design icons with safe padding around the logo, so cropping never cuts it off. A quick way to test is to open the icon, imagine a circle drawn inside it, and check that nothing important falls outside that circle.

The generator warns when icons are missing and when the short name is too long, but it cannot check that your icon URLs actually return images. Test that yourself: open each icon URL in a browser and confirm it loads, and run an installability audit in your browser developer tools, under the Application or Lighthouse panels. Those tools list exactly which requirement fails, in plain words, and they are the fastest path from a manifest that looks right to one that actually installs.

Beyond the Manifest

A manifest alone does not make a full PWA. You also need HTTPS, because installation is only offered on secure origins, and a service worker, because offline support and reliable loading are part of the promise. The service worker caches the app shell so the app opens even with a poor connection, and it enables features like push notifications when the user opts in. None of that belongs in the manifest, but all of it depends on the manifest being right first.

Start with the generated file, link it, test installation on a real phone, and then add the service worker. Check the installed app the way a user would: does the icon look right, does the splash screen match your colors, does it open on the right page, and does it work after the first launch? A manifest is a small file with an outsized effect on first impressions, and getting it right is one of the cheapest quality wins a web project can have.

Related tools

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top