Web App Manifest Generator

Generate a complete web app manifest.json for your Progressive Web App (PWA). Configure icons, theme colors, display mode, and more. Instant client-side generation with download.

Basic Information

App Name

Short Name Shown on home screen. Max 12 chars recommended.

Description

Start URL The URL launched when user taps the app icon.

Scope Navigation scope of the app. Pages outside this scope open in browser.

Appearance

Theme Color

Background Color

Shown as splash screen background while app loads.

App Behavior

Display Mode

Orientation

Icons

Recommended sizes: 192x192, 512x512

Note: Use maskable icons for adaptive icons on Android.

About Web App Manifest Generator

A web app manifest is a JSON file that tells the browser about your Progressive Web App (PWA) and how it should behave when installed on the user's desktop or mobile device. It includes information like the app's name, icons, theme colors, and display mode.

Features

Generate a complete, valid manifest.json file
Configure app name, short name, and description
Set theme and background colors with color pickers
Choose display mode (standalone, fullscreen, minimal-ui, browser)
Add multiple icon sizes with purpose settings
Live preview of how your app will look on home screen
One-click download of manifest.json
Copy JSON to clipboard instantly
Get the HTML link tag to add to your page
100% client-side — no data sent to any server

Frequently Asked Questions

What is a web app manifest?

A web app manifest is a JSON file that provides information about a web application, such as its name, icons, and theme colors. It enables the app to be installed on a device's home screen and behave like a native app.

Where should I place the manifest.json file?

Place the manifest.json file in the root directory of your website (e.g., https://example.com/manifest.json) and reference it in your HTML head with: <link rel="manifest" href="/manifest.json" />

What icon sizes should I include?

At minimum, include 192x192 and 512x512 icons. The 192x192 icon is used for the home screen icon, and 512x512 is used for the splash screen. You can also include other sizes for better compatibility.

What is the difference between theme color and background color?

Theme color affects the browser's address bar and UI elements. Background color is shown as the splash screen background while your app loads when launched from the home screen.