Web App Manifest generator

Web App Manifest generator

Generate your Web App Manifest json and improve site data

The manifest builder ensure you to easily add manifest.json in your web pages.

Fill in the form

Short name

Up to 40 characters

Name

Up to 60 characters

Description

Up to 200 characters

Background color

 

Theme color

 

Start URL
Direction

Smartphone text direction

Display

Smartphone display mode

Orientation

Smartphone orientation mode

Related application

Boolean instruction

Upload image
Upload
Language

 

Web App Manifest JSON

A JSON document that provides metadata for Progressive Web Apps

The web app manifest is a basic JSON file that provide information about a website/application, allowing users a quick access for a better experience (useful for websites on the homescreen of a device, for example).

Web App Manifests give you the possibility to save a site bookmark to a device’s home screen through the specification of basic metadata about one extension such as the name and the version. Json files also determines aspects of extension’s functionality, such as background and content scripts.

When a site is launched:

  • It has a unique icon and name (users can recognize it from other websites).
  • It displays something to users (resources are downloaded or restored from cache).
  • It provides default display characteristics to the browser, reducing sudden transition when site resources become available.

It does all this through the simple mechanism of metadata in a text file. That's the web app manifest.

Having a manifest is required by Chrome to show the "Add to Home Screen" prompt.

Here is browser support for manifest:

Browser Support
Chrome 79 supported
Chrome 78 supported
Chrome 77 supported
Chrome 76 supported
Chrome 75 supported
Chrome 74 supported
Chrome 73 supported
Chrome (Android) 75 supported
Edge 76 supported
Browser Support
Firefox (Android) 67 almost supported
Safari (iOS) 13 almost supported
Safari (iOS) 12.2-12.3 almost supported
Safari (iOS) 12.0-12.1 almost supported
Safari (iOS) 11.3-11.4 almost supported
Opera (Android) 46 almost supported
Samsung int. 9.2 almost supported
Samsung int. 4-8.1 almost supported
QQ browser 1.2 almost supported
Browser Support
Edge 18 no support
Edge 17 no support
Edge 16 no support
Firefox 70 no support
Firefox 69 no support
Firefox 68 no support
Firefox 67 no support
Safari 13 no support
Safari 11.1-12.1 no support

Manifest components

Let's diving into web app manifest components

The following table gives you a detailed explanation and example of each of the manifest components. To learn more, check out the links in the related resources section below.

Short name

Provides a short human-readable name for the application.

This is intended for use where there is insufficient space to display the full name of the web application.

"short_name": "dunplab"

Name

Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.

"name": "dunplab web app"

Description

Provides a general description of what the web application does.

"description": "The web app that helps developers"

Lang

Specifies the primary language for the values in the name and short_name members.

This value is a string containing a single language tag.

"lang": "en_US"

Start URL

Specifies the URL that loads when a user launches the application from a device.

If given as a relative URL, the base URL will be the URL of the manifest.

"start_url": "/?utm_source=homescreen"

Background

Specify background color using the appropriately named background_color property.

Browser uses this color the instant the web app is launched and the color remains on the screen until the web app's first render

"background_color": "#000000"

Theme color

Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS (e.g., on Android's task switcher, the theme color surrounds the application).

"theme_color": "#e3e3e3"

Direction

Specifies the primary text direction, it can help provide the correct display of languages:

  • "lrt": left-to-right
  • "rtl": right-to-left
  • "auto": make a best guess about the text's direction
"dir": "ltr"

Display

Defines the developer's preferred display mode for the web app

  • "fullscreen": all of the available display area is used and no user agent chrome is shown
  • "standalone": the application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar.
  • "minimal-ui": The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser.
  • "browser": The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default.
"display": "standalone"

Orientation

Defines the default orientation for all the web application's top level browsing contexts.

  • "any": append portrait-primary, portrait-secondary, landscape-primary and landscape-secondary to orientations.
  • "natural": append portrait-primary or landscape-primary to orientations such as the associated current orientation angle is 0.
  • "landscape": depending on platform convention, append landscape-primary, or landscape-secondary, or both to orientations.
  • "landscape-primary": append landscape-primary to orientation.
  • "landscape-secondary": append landscape-secondary to orientation.
  • "portrait": depending on platform convention, append portrait-primary, or portrait-secondary, or both to orientations.
  • "portrait-primary": append portrait-primary to orientation.
  • "portrait-secondary": append portrait-secondary to orientation.
"orientation": "portrait"

Prefer application

Specifies a boolean value that hints for the user agent to indicate to the user that the specified related applications (see below) are available, and recommended over the web application. This should only be used if the related native apps really do offer something that the web application can't do.

If omitted the defaults value is false.

"prefer_related_applications": "false"

Related application

Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform — for example a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the web application that provide similar or equivalent functionality — like the native app version of the web app.

"related_applications":[
  {
   "platform": "play",
   "url": "https://play.google.com/store/apps/details?id=com.example.app1",
   "id": "com.example.app1"
  },
  {
   "platform": "itunes",
   "url":"https://itunes.apple.com/app/example-app1/id123456789"
  }
]

Scope

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied.

If the user navigates the application outside the scope, it returns to being a normal web page.

If scope URL is the empty string, then return undefined.

If the scope is a relative URL, the base URL will be the URL of the manifest.

"scope": "/myapp/"

Icons

Specifies an array of image objects that can serve as application icons in various contexts.

For example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an OS's task switcher and/or system preferences.

"icons": [
  {
   "src":"icon/icon128x128.png",
   "size":"128x128",
   "type":"image/png"
  },
  {
   "src":"icon/icon144x144.png",
   "size":"144x144",
   "type":"image/png"
  },
  {
   "src":"icon/icon152x152.png",
   "size":"152x152",
   "type":"image/png"
  },
  {
   "src":"icon/icon192x192.png",
   "size":"192x192",
   "type":"image/png"
  },
  {
   "src":"icon/icon48x48.webp",
   "size":"48x48",
   "type":"image/webp"
  },
  {
   "src":"icon/icon.ico",
   "size":"72x72 96x96 128x128 256x256"
  }
]

Specification

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: name, background_color, and the icon in the icons array that is closest to 128dpi for the device.

Manifests should be served using the application/manifest+json MIME type. However, it is optional to do so.

Share this tool

Did u like it? Share it!

Related tools

Try these one!
Validate your AMP pages

AMP VALIDATOR

Validate your AMP pages with this tool.

Test your Accelerated Mobile Pages, get detailed report and optimize performance.

GO VALIDATE
Network requests and timeline waterfall

NETWORK WATERFALL

Capture web page requests and timeline waterfall.

Quickly capture and analyze web page network requests during page load.

GO ANALYZE
Test your page structured data

STRUCTURED DATA TEST

Test your web pages structured data.

Check conformity of your structured data json-ld and improve your SEO.

GO TESTING
Test your page speed insights

PAGESPEED INSIGHTS

Analyze your web page speed performance.

Retrieve information about speed index, latency, first contentful paint and more.

GO ANALYZE