No Login Data Private Local Save

PWA Manifest Generator - Online Create app.webmanifest

33
0
0
0

PWA Manifest Generator

Create your manifest.json or app.webmanifest file visually. Fill in the fields, preview in real-time, and download instantly.

Basic Information
Full name of your application (required).
Shown on the home screen when space is limited (max ~12 chars).
Helps users and search engines understand your PWA.
Unique identifier for your PWA (Manifest V3+).
Display Settings
How the app appears when launched.
Toolbar/status bar color. Also set in <meta name="theme-color">.
Splash screen background color.
The URL the app loads on launch. Usually /.
Limits which pages are considered part of the PWA. Defaults to start_url's directory.
App Icons

Add at least a 192x192 and a 512x512 icon for full PWA support across devices.

Screenshots are used in app store listings and install prompts.

Categories & Metadata
business education entertainment finance games health lifestyle music news photography productivity shopping social sports travel utilities weather
Live Preview 0 fields 
{
  "name": "My PWA App",
  "short_name": "My App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#5b5fe3",
  "background_color": "#ffffff",
  "lang": "en-US"
}

Frequently Asked Questions

A PWA Manifest is a JSON file (typically named manifest.json or app.webmanifest) that provides metadata about your Progressive Web App. It tells the browser how your app should behave when installed on a user's device — including the app name, icons, theme colors, display mode, and start URL. It's a core requirement for making your web app installable and is linked in your HTML via <link rel="manifest" href="/manifest.json">.

The manifest file should be placed in the root directory of your web application (e.g., /manifest.json) so it's accessible at the root URL. You link it in the <head> of every page: <link rel="manifest" href="/manifest.json">. The scope field in the manifest determines which pages are considered part of the PWA — by default, it's the directory containing the manifest.

At minimum, you should provide 192Ă—192 and 512Ă—512 pixel icons. The 192Ă—192 icon is used for the home screen on most Android devices, while the 512Ă—512 icon is used for the splash screen and app stores. For broader compatibility, consider including: 48Ă—48, 72Ă—72, 96Ă—96, 128Ă—128, 144Ă—144, 152Ă—152, 192Ă—192, 384Ă—384, and 512Ă—512. Also include a maskable icon (with "purpose": "maskable") for adaptive icon support on Android.

  • standalone — Looks and feels like a native app. The browser UI is hidden, but the status bar remains visible. Recommended for most PWAs.
  • fullscreen — The app takes the entire screen with no browser UI or status bar. Best for games and immersive experiences.
  • minimal-ui — Similar to standalone but shows minimal browser controls (back, refresh). Good for content-focused apps.
  • browser — Opens as a regular browser tab. No app-like experience. Use for testing or when you don't want install behavior.

theme_color sets the color of the browser's toolbar/status bar when the PWA is launched. It should match your brand's primary color. background_color sets the background color of the splash screen that appears while the PWA is loading. Use a color that matches your app's main background to create a seamless transition. Both should also be set via <meta> tags for broader support: <meta name="theme-color" content="#...">.

You can validate your manifest by: (1) Using Chrome DevTools → Application panel → Manifest section to see parsed results and errors. (2) Using the Web Manifest Validator online (validator.w3.org doesn't directly validate manifests but Lighthouse does). (3) Running a Lighthouse audit in Chrome DevTools which checks for manifest completeness. (4) Testing on an actual device by serving over HTTPS and attempting to install. Common issues include missing required fields, invalid icon paths, or CORS errors on icon URLs.

Both are valid. manifest.json is the traditional and most widely recognized name. app.webmanifest is the newer, more semantically correct extension registered by the W3C. Either works in modern browsers. The key requirement is that the file is served with the correct MIME type: application/manifest+json. If your server doesn't serve .webmanifest with the correct MIME type, stick with .json.

For a PWA to be installable, it needs: (1) A valid web app manifest with at least name, icons (with a 192Ă—192 and 512Ă—512 icon), start_url, and display set to standalone, fullscreen, or minimal-ui. (2) A registered Service Worker with a fetch handler. (3) Served over HTTPS. (4) The user must have engaged with the site (Chrome's install criteria). Use this generator to create the manifest, then add a Service Worker to make your PWA fully installable.
🔧 Related Tools