How to use the web app manifest generator
- Enter the app name, a short name and a description.
- Enter the start address, display mode, theme color and background color.
- List the icon sizes and the path of the icon files, using {size} where the size goes.
- Copy the JSON or download the manifest file and link it from your pages.
Formula
name and short_name: the full and the short title shown to the person who installs the app
start_url, display, theme_color and background_color: how the app opens and looks
icons: one entry per size, with the path, the size as WxH and the type
The file is plain JSON. Add it to your site and point to it with a link tag whose rel is manifest.
A planner app with two icons
With the name Weekly Planner, the short name Planner, the start address /?source=pwa, standalone display, the theme color #1a73e8 and icon sizes 192 and 512, the tool writes a manifest with two icons. Their paths come from the pattern /icons/icon-{size}.png, so they are /icons/icon-192.png and /icons/icon-512.png.
A small table beside the file shows whether the 192 and 512 pixel icons are included and whether a theme color is set, since installable apps usually need both sizes.
What a manifest does
A web app manifest tells the browser how to treat your site once someone adds it to a home screen or desktop. It sets the name under the icon, the page that opens first, whether browser controls are shown, and the colors for the splash screen and the toolbar. Without it, the site still works, but it is added as a plain bookmark.
Standalone mode hides the browser address bar so the site feels like an app. Fullscreen hides everything, minimal-ui keeps a small set of controls, and browser opens a normal tab.
Before you publish
Make the icon files first and check that the paths match, then serve the manifest from the same site. Maskable icons need extra space around the artwork so that round or rounded shapes do not cut it off. A secure connection is required for installing. Related tools: the Sitemap XML Generator and the Robots.txt Generator write other site files, the Color Picker finds hex values for the theme, and the HTTP Security Headers Analyzer checks the headers your server sends.
Assumptions and limits
- Icons are square PNG files you provide yourself. The tool does not make images.
- Colors are written as six digit hex values such as #1a73e8.
- The values shown are examples. Use your own name, address and colors.
- Everything is built in your browser and nothing is uploaded.
Frequently asked questions
Where do I put the file?
Save it as manifest.webmanifest at the root of your site, then add a link tag with rel manifest and the file address to each page.
What icon sizes do I need?
Most browsers want at least a 192 pixel and a 512 pixel square icon. More sizes help on some devices.
What does maskable mean?
A maskable icon has its artwork inside a safe zone so the system can crop it to a circle or rounded square.
Does the manifest make the site work offline?
No. Offline use needs a service worker, which is a separate script.