PWA specifications · Complete fields · Instant verification

Manifest.json Generator PWA Manifest Generator

Quickly create a manifest.json that complies with the Progressive Web App (PWA) specification. Supports complete field settings, icon management, Shortcuts, Screenshots and real-time verification.

Manifest.json generator
Basic information
Display and theme
Display Mode*
Orientation
App Icons

💡 PWA installation requires at least 192×192 and 512×512 icons; "Add standard sizes" will add a total of 8 sizes from 72 to 512 at one time.

Shortcuts

Shortcuts allows users to quickly jump to the specified page when long-pressing the application icon (Android support).

Screenshots

Screenshots are used for app store and installation interface display (supported by Android and desktop Chrome).

Categories
manifest.json instant preview
0 B 
{}
Verification results

Verification will occur immediately after setting the fields...

advertising space

❓ FAQ FAQ

Frequently asked questions about manifest.json and PWA

What is manifest.json?

manifest.json(Web App Manifest) is a configuration file in JSON format that describes the configuration of a web application.Name, icon, display mode, start page Wait for information. After the browser reads it, your website can be presented as an "application".

Referenced via a line of tags in HTML:<link rel="manifest" href="/manifest.json">

The functions of manifest.json include:

  • Allows users to "install" websites to their home screen or desktop
  • Define application icon and splash screen
  • Control display mode (full screen, independent window, etc.)
  • Set theme color and background color
  • Declare Android long press shortcuts (Shortcuts)
What is a PWA? Why do I need manifest.json?

PWA（Progressive Web App） It is a technology that combines the advantages of web pages and native applications. PWAs can be installed, run offline, and receive notifications, but do not need to be published through an app store.

A complete PWA requires three core elements:

  1. manifest.json — Declare application identity and installation information (generated by this tool)
  2. Service Worker — Provides offline cache and background functions
  3. HTTPS — Necessary conditions for secure transmission

💡 Manifest.json is a necessary condition for the browser to display the "Install Application" prompt, and it is also an important item for PWA scoring.

What do each column mean?

The following is a description of the main fields of manifest.json:

  • name / short_name — The full name of the application and the abbreviation displayed after installation (short_name is recommended to be ≤ 12 characters)
  • start_url — The page that opens when starting the application, it is recommended to use a relative path (such as /)
  • scope — The navigation range of the application, links outside the range will be opened by the browser
  • display — Display mode:standalone(independent window),fullscreen(full screen),minimal-ui(concise introduction),browser(browser)
  • theme_color —Colors of toolbars and system bars
  • background_color — Background color for splash screen and loading phase
  • orientation — Suggested directions: portrait, landscape, any
  • icons — Application icon, including src, sizes, type, purpose
  • shortcuts — Quick shortcuts that appear when you press and hold an icon (Android)
  • screenshots — Screenshot of the installation interface display
  • categories — Application categories (max 3)
Why do we need 192×192 and 512×512 illustrations?

Google's PWA installation standards clearly require that the manifest must contain the following two icons:

192×192 — Displayed on the home screen and application list after installation

512×512 — Installation tips and startup screen usage

Lack of either will cause the browser to not display the "Install Application" prompt. Available in a variety of sizes from 72–512 to ensure the best display quality on all devices.

💡 Each icon should specify purpose：any(general),maskable(Can be masked, including safety margin),monochrome(monochrome).

Where should manifest.json be placed? How to deploy?

manifest.json is usually placed on the websiteroot directory, and in HTML <head> Quoted in:

<link rel="manifest" href="/manifest.json">

Deployment steps:

  1. Use this tool to set fields and download manifest.json
  2. Upload to the root directory of the website (the same directory as the image file)
  3. Add manifest reference tag to HTML head
  4. Confirm start_url with scope Point to the correct relative path
  5. Check the manifest loading status using the Application panel of Chrome DevTools

⚠️ Note: The icon path in the manifest isRelative to manifest file location, if the manifest is in the root directory, the icon path usually starts with /.

Is this tool safe? What browsers are supported?

Totally safe! Manifest.json Generator is a 100% pure front-end tool：

  • ✅ All field settings, JSON generation and validation are done in your browser
  • ✅ No data will be uploaded to the server
  • ✅ No registration or login required, it can be used completely offline after loading
  • ✅ None of your settings will be saved

Browser compatibility: This tool is compatible with the latest versions of all major browsers (Chrome, Firefox, Safari, Edge, Opera).

📖 Complete Guide to PWA Manifest: Building an Installable Web App from Scratch

Learn more about manifest.json and Progressive Web App

Function introduction

Manifest.json Generator is a free PWA Manifest creation tool launched by ToolHub. Setting via graphical interface Application name, abbreviation, description, language, start page and scope, select Display mode, orientation, theme color, and manage Application icons, Shortcuts, Screenshots and categories. The formatted manifest.json is instantly generated on the right side, and required fields, icon integrity, and color validity are automatically verified.

What is manifest.json?

Web App Manifest It is a standard developed by the W3C that describes the metadata of web applications in JSON format. After the browser and operating system read the manifest, they can render the website as a native application: display it on the main screen, provide a separate window, and set the splash screen and icon.

A simplest manifest.json example:

{ "name": "ToolHub", "short_name": "ToolHub", "start_url": "/", "display": "standalone", "background_color": "#0B1120", "theme_color": "#0B1120", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" } ] }

Introduction to PWA: Why make your website “installable”?

PWA（Progressive Web App） Give web applications the experience of native applications:

  • Installable — Install directly to the home screen without going through the app store
  • Available offline — Provide offline access with Service Worker
  • High efficiency — Fast startup, immersive interface (full screen or independent window)
  • low threshold — No review required, updates take effect immediately
  • Cross-platform — The same code supports Android, Windows, iOS (some support) and macOS

Manifest.json is the "ID" of the PWA. Without it, the browser cannot treat the website as an installable application.

Field Description

Required fields

  • name or short_name — at least one, application name
  • start_url — start page
  • display — display mode
  • icons — At least one image; 192×192 and 512×512 recommended

Important fields

  • description — Application description
  • lang — Primary language (e.g. zh-TW, en)
  • scope — Navigation range, it is recommended to be at the same level as start_url or above
  • orientation — Directional preference
  • theme_color / background_color — Theme and background color
  • shortcuts — Android long press shortcuts (up to 4 suggestions)
  • screenshots — Screenshot of the installation interface
  • categories — Category tags (up to 3)

best practices

  • short_name stays within 12 characters, to avoid being cut off on the main screen
  • Provide maskable icons — Icons with purpose set to maskable should have safe margins on all four sides (content should account for 80% of the center)
  • theme_color is consistent with the website brand — Will affect the color matching of mobile device toolbar and system bar
  • start_url using relative path — Avoid path failure when changing domains
  • Manage together with favicon — Icons can be shared with PWA icons generated by favicon-generator

Browser compatibility

This tool is developed based on modern web standards and is compatible with the latest versions of all major browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge and Opera. It is recommended to use the latest version for the best experience.

Privacy protection

ToolHub takes the privacy of your data seriously. Manifest.json Generator adopts 100% pure front-end architecture, all field settings, JSON generation, and validation are done in your browser, and no data is transferred to an external server. We will not store, analyze or share any content you enter, please feel free to use it.

Operation successful