Web App Manifest Generator

Generate a Web App Manifest (manifest.json) for Progressive Web Apps. Configure name, icons, display mode, theme color, and start URL for PWA installation.

App Name *

Short Name

Description

Start URL

Display Mode

Orientation

Theme Color

Background Color

Display Mode: Configured Icons: 0Output Length: 0

manifest.json

HTML Link Tag

Add this to the <head> of your HTML to register the manifest.

About Web App Manifest Generator

A Web App Manifest is a JSON file that tells browsers how to display your Progressive Web App when installed on a device. It controls the app name, icon, splash screen, theme colors, orientation, and whether the app appears in standalone mode (no browser UI) or fullscreen. This generator creates a valid manifest.json with sensible defaults and a starter icon configuration. Download it, place it at /manifest.json in your project root, and link to it from your HTML <head>.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Adding a manifest to an existing site rather than starting from a framework template.
Getting the icon size set right for the platforms you care about.
Setting a start URL and display mode deliberately rather than by default.
Producing a manifest to compare against one a framework generated.
Adding a theme colour so the browser chrome matches the site.

Frequently Asked Questions

What does the manifest actually do?: It tells the browser how to present your site when installed: the name on the home screen, the icon, whether the browser chrome is hidden, the starting URL and the splash colours. Without it a site can still be bookmarked, but it will not offer to install.
Which display mode should I choose?: `standalone` for most apps — it hides the address bar and looks like a native app while keeping system chrome. `fullscreen` for games. `minimal-ui` keeps navigation controls. `browser` opts out of the app appearance entirely, which is the same as having no manifest for this purpose.
Which icon sizes are needed?: 192×192 and 512×512 are the two Chrome requires for installability, both PNG. A 512 with `"purpose": "maskable"` additionally lets Android crop it into the platform's icon shape without clipping your logo — a maskable icon needs its content inside the middle 80%.
What makes a site installable?: A manifest with name, icons and a start URL, served over HTTPS, plus a registered service worker with a fetch handler. Missing any one of them means no install prompt at all, and the browser does not say which — the Application panel in DevTools lists what is absent.
Why is start_url separate from the manifest location?: Because the installed app should open where a user wants to begin, which is rarely the page they happened to install from. It is also the scope anchor: navigation outside the manifest's scope opens in a normal browser tab instead of the installed window.

Common errors and gotchas

Setting a scope narrower than the start URL, which strands the installed app immediately.
Providing only one icon size, which several install surfaces will reject.
Setting a start URL that is not scoped by the manifest, which breaks the installed navigation.
Assuming a manifest alone makes the site installable, when a service worker and HTTPS are also required.
Linking the manifest without `crossorigin` where credentials are needed, so the fetch fails silently.