UTILS.
100% in-browser
📱

Web App Manifest Generator (PWA)

Generate a valid PWA web app manifest (manifest.json) with icons, theme colors and display mode, plus the ready-to-paste link rel=manifest tag.

— output appears here —
— output appears here —

About this tool

The Web App Manifest Generator builds a valid manifest.json for a Progressive Web App from a simple form, then hands you the companion HTML tags to drop into your page <head>. Everything is assembled in your browser and nothing is uploaded — you can copy the JSON, download it as manifest.json, or copy the link and meta tags.

A web app manifest is the JSON file that lets a site be installed to a home screen and launched like a native app. This tool assembles the standard keys — name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui or browser), orientation, theme_color, background_color and an icons array — dropping any field you leave blank so the output stays clean. Each icon size you tick becomes an entry with its src, sizes and type (derived from the file extension), and the optional purpose lets you mark icons as maskable. The result is serialized with JSON.stringify at two-space indentation, so it is human-readable and standards-compliant.

Use the {size} placeholder in the icon path (for example /icons/icon-{size}.png) and it is replaced with each dimension such as 192x192 and 512x512. At minimum a manifest should include a name, a start_url, a display mode and at least a 192px and a 512px icon, which are the defaults here. Reference it from your page with the generated <link rel="manifest"> tag and add the theme-color meta for the browser UI.

Frequently asked questions

What is a web app manifest?
It is a JSON file that describes your Progressive Web App — its name, icons, colors and how it should launch — so browsers can offer to install it to the home screen and open it in an app-like window.
Which fields are required?
A useful manifest needs at least name (or short_name), a start_url, a display mode and icons of 192x192 and 512x512. This generator fills those by default; other fields are optional and omitted when left blank.
What does 'maskable' mean for icons?
Maskable icons have safe padding so platforms can crop them into circles, squircles or rounded squares without clipping your logo. Set the purpose to 'maskable' or 'any maskable' for icons designed with that safe zone.
How do I install the manifest on my site?
Save the JSON as manifest.json, upload it to your site, then add the generated <link rel="manifest" href="/manifest.json"> and theme-color meta tags to the <head> of every page.

More tools