By · Updated

Web App Manifest Generator

PWA manifest.webmanifest With Icons, Colours and Head Tags to Link It

No ratings yet

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Web App Manifest Generator works

A web app manifest generator writes the JSON file that lets a website install like an app: its name, icon, colours and how it opens. Fill in the fields and copy a valid manifest.webmanifest, the head tags that link it, and the list of icon files to create.

The web app manifest is a small JSON file linked from every page with <link rel="manifest">. Browsers read it to decide whether the site can be installed, then use it to draw the home screen icon, the splash screen and the window the app opens in. Without it, "Add to Home Screen" just saves a bookmark.

What the web app manifest generator fills in

name appears on the install prompt and splash screen; short_name is the label under the icon, so keep it to about 12 characters. start_url is the page the app opens on, and scope limits which URLs stay inside the app window. id gives the app a stable identity, so changing start_url later does not create a second install. theme_color tints the title bar and background_color fills the splash screen while the page loads.

Display modes

standalone opens in its own window with no address bar, which is what most apps want. fullscreen hides the status bar too, for games and kiosks. minimal-ui keeps back and reload buttons. browser opens a normal tab, which is the same as not installing at all.

Icons

Chrome needs a 192 and a 512 pixel PNG to offer installation. A maskable icon has its logo inside the centre 80 percent, so Android can crop it to a circle or squircle without cutting the edges. iOS ignores the manifest icons and uses the apple-touch-icon link instead.

FAQ

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

Both work. The .webmanifest extension is the one in the specification and servers can send it with the application/manifest+json type, but browsers accept manifest.json too. Whatever you name it, make sure the href in the link tag matches.

Why does Chrome not show the install button?

Chrome needs a manifest with a name, a start URL, a display mode other than browser, and 192 and 512 pixel icons, served over HTTPS. Open DevTools, go to Application, then Manifest, to see which requirement is missing or which icon failed to load.

Do I need a service worker as well?

Not to install. Chrome dropped the service worker requirement in 2023, so a manifest alone makes the site installable. You still need a service worker if you want the app to open offline or send push notifications.

What happens if I change the manifest after people install the app?

Browsers check the manifest now and then and update the name, icons and colours of installed apps. Keep the id the same, because a new id counts as a different app and users would have to install it again.

See also: all SEO tools, Dev Utilities, Formatters & Validators, Data & Encoding, Security & Identifiers, Accessibility, AI.

Related tools

Favicon Package

Build a multi-size favicon.ico from any image.

Open Graph Preview

Preview your link card on Facebook, LinkedIn, Slack, Discord and WhatsApp.

CSP Builder

Build a Content-Security-Policy header from per-directive source lists.

Robots.txt Checker

Check a robots.txt file line by line before you deploy it.

HTTP Header Inspector

Parse pasted HTTP headers, explain each one and audit security.