jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

Image & Asset Tools

Web App Manifest Generator

Create a web app manifest with name, short name, icons, theme color, background color, display mode, and orientation. The output is ready to place in your static site root.

Loading tool...

What is Web App Manifest Generator?

A web app manifest is a JSON file that tells browsers about your web application and how it should behave when installed on a user's device. It controls the app name, icons, colors, and launch behavior. For static sites on GitHub Pages, a manifest is the key step toward making the site installable as a Progressive Web App.

Quick answer

A web app manifest controls how your site looks when installed on a device home screen. It sets the app name, icons, theme color, and launch behavior for PWA-ready static sites.

Limitations

  • The manifest only works over HTTPS. HTTP sites cannot use the manifest for install prompts.
  • The manifest requires actual icon image files at the specified paths. Missing or incorrectly named icons cause the browser to reject the manifest.
  • Install behavior differs between Android and iOS. Android uses the manifest for install prompts, while iOS relies on Apple touch icon meta tags and does not support full PWA install from the manifest.

How to use this tool

  1. Enter your site name and an optional short name that fits under 12 characters.
  2. Select the display mode: standalone removes browser chrome for an app-like experience.
  3. Set icon paths to PNG images at recommended sizes such as 192x192 and 512x512.
  4. Copy the generated manifest JSON and save it as site.webmanifest in your site root.

What you can use it for

  • Make a static documentation site installable on mobile home screens.
  • Add PWA metadata to a blog so returning readers can launch it like an app.
  • Prepare a web app manifest before submitting a site to a PWA directory.

Use cases

Practical examples

Example

Tool site with standalone mode

A static site that publishes browser-based utility tools sets display to standalone and theme-color to match its coral brand accent. Visitors on Android can add the site to their home screen and open it without the address bar.

Example

Blog with minimal manifest

A personal blog uses only name, short name, and a 192x192 icon. It leaves display as browser and skips orientation. The blog appears as a regular shortcut but still shows a branded icon on the home screen.

Common mistakes

  • Setting icon paths that point to invalid locations or missing files, which causes the browser to reject the manifest.
  • Generating a manifest but forgetting the <link rel="manifest" href="/site.webmanifest"> tag in the page head, so the browser never reads it.
  • Choosing fullscreen or standalone display for a content-heavy site where users still need the address bar for navigation.

Verification

  1. Open Chrome DevTools > Application > Manifest to verify the manifest is parsed correctly and icons are accessible.
  2. Test the site over HTTPS on an Android device using Chrome and confirm the Add to Home Screen prompt appears.

FAQ

Questions about Web App Manifest Generator

Where should I place the manifest file?

Place site.webmanifest in your site root and reference it with <link rel="manifest" href="/site.webmanifest"> in the page head. The file must be served with the application/manifest+json MIME type.

Does a regular static site need a manifest?

A manifest is optional but recommended. It is the only way to control how your site appears when a user saves it to their home screen. Without a manifest, the browser uses a generic screenshot as the icon.

What icon sizes are required for PWA?

At minimum, provide 192x192 and 512x512 PNG icons. The 192x192 icon is used for the home screen and the 512x512 icon is required for the installable PWA badge on Android.

Related tools

More image & asset tools

Also try

Also try