PWA Manifest Generator to Create a Web App Manifest File

Every Progressive Web App starts with one small JSON file: the web app manifest. It tells browsers your app's name, its icons, its colours and how it should open, and without it there is no installation, no home screen icon and no splash screen. The PWA Manifest Generator builds that file with you: fill in your app's details, and download a ready to use manifest.json that follows the standard.

What a Web App Manifest Does

The manifest is a JSON document, formally the Web App Manifest described by the MDN documentation, that a page links to with a single line of HTML. When a browser finds it, it learns how the app should present itself once installed: the full name shown under the icon, a short name for tight spaces, the page to open at launch, whether to show browser chrome or run in a clean standalone window, and the background and theme colours used for the splash screen and title bar.

Icons are the other half of the job. The manifest points to icon files at several sizes, conventionally at least 192×192 and 512×512 pixels, so devices can pick a sharp version for home screens, app drawers and splash displays.

What You Can Build with This Generator

• A complete manifest.json from a form, instead of hand writing JSON and hoping the commas are right.
• All the standard members covered: names, start URL, display mode, colours and icons, the fields browsers actually read.
• Two ways to take the result: Copy JSON to paste it into your project directly, or Download JSON to save the file as manifest.json.
• A standards shaped output, so what you generate matches what Chrome, Edge and other browsers expect when deciding whether your app can be installed.

Once your manifest is live, verify the whole setup with the PWA Compatibility Check, which audits whether browsers can actually use it.

How to Create Your manifest.json

1. Gather your details first: the app's full name, a short name of about twelve characters or fewer, your brand colours as hex values, and the page the app should open on.
2. Open the PWA Manifest Generator and enter the full name and short name in the name fields.
3. Set the start URL, usually your home page or the main app screen, and choose a display mode: standalone suits most apps because it hides the browser address bar.
4. Pick the background colour, shown on the splash screen, and the theme colour, which tints the browser toolbar to match your brand.
5. Add your icons with their file paths and sizes, making sure you include at least a 192×192 and a 512×512 version.
6. Click Copy JSON to grab the manifest for pasting, or Download JSON to save it as a file.
7. Upload manifest.json to your site, link it from every page's head with a manifest link tag, and test the result in your browser's developer tools.

A Sample Manifest for a Small Shop Site

Picture a bakery taking orders online. Its manifest declares the name "Crumb and Craft Bakery" with the short name "CrumbCraft" for the home screen, a start URL of the ordering page, standalone display so the ordering screen feels like a till app, a warm cream background colour for the splash screen, and a deep brown theme colour matching the shop's branding. Icons are listed at 192 and 512 pixels, prepared square with generous padding using an Image Resizer so the loaf logo is not clipped. With that one file in place, regular customers can install the shop to their home screen and reorder in two taps.

Tips for Icons, Names and Display Modes

Keep the short name genuinely short. Long names are truncated under home screen icons, often mid word. If your full name needs more than about twelve characters to make sense, invent a distinct short name rather than accepting a cut off one.

Design icons with a safe zone. Platforms mask icons into circles, rounded squares and other shapes. Keep the important artwork in the centre 80 percent of the image, and consider supplying a purpose built maskable icon so nothing vital is cropped.

The commonest mistake is a broken icon path. Manifest URLs are relative to the manifest file's location, and a single wrong folder name means a 404 icon and a failed installability check. Test every path after uploading.

Remember the manifest is not the whole PWA. It describes your app, but installation also needs HTTPS and a service worker. A perfect manifest on a site without a service worker still will not install in most browsers.

Frequently Asked Questions About Web App Manifests

Where do I put the manifest.json file?

Usually in your site's root or a static assets folder, as long as the path in your link tag points to it correctly. Every page that should be installable must include the manifest link tag in its head.

What is the difference between name and short_name?

The name is the full title shown in install prompts and app lists. The short_name is a compact version used where space is tight, such as under a home screen icon.

Which icon sizes are required?

Browsers generally expect at least 192×192 for the home screen and 512×512 for splash screens. Supplying both, plus a maskable variant, covers the vast majority of devices.

What display mode should I choose?

Standalone is right for most apps: it opens without browser address bars while keeping system navigation. Fullscreen suits games and media, and minimal-ui keeps a small amount of browser control.

Can I edit the manifest after generating it?

Yes. It is plain JSON text, so you can adjust any value in a text editor. Just keep the JSON syntax valid, since one missing comma makes browsers ignore the whole file.

Does the manifest work on iPhones?

Safari on iOS supports parts of the standard and uses some manifest values, though it historically relies on its own meta tags and touch icons for parts of the install experience. A standard manifest still helps and does no harm.

One Small File Your PWA Cannot Skip

The web app manifest is a few dozen lines of JSON that decide how your app is named, pictured and launched on every device. The PWA Manifest Generator writes those lines correctly the first time, so you can spend your effort on the app itself rather than on debugging a missing comma.