Type Array
Mandatory Yes
Example
"icons": [
  {
    "src": "icon.webp",
    "sizes": "48x48",
    "type": "image/webp"
  }
]

The icons member specifies an array of objects representing image files that can serve as application icons for different 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.

Examples

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

Values

Image objects may contain the following values:

Member Description
sizes A string containing space-separated image dimensions. 
src The path to the image file. If src is a relative URL, the base URL will be the URL of the manifest.
type A hint as to the media type of the image. The purpose of this member is to allow a user agent to quickly ignore images with media types it does not support.
purpose

Defines the purpose of the image, for example if the image is intended to serve some special purpose in the context of the host OS (i.e., for better integration).

purpose can have one of the following values:

  • badge: A user agent can present this icon where space constraints and/or color requirements differ from those of the application icon.
  • maskable: The image is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can safely be ignored and masked away by the user agent.
  • any: The user agent is free to display the icon in any context (this is the default value).

Specifications

Specification Status Comment Feedback

Web App Manifest
The definition of 'icons' in that specification.

Working Draft

Initial definition.

Web App Manifest Working Group drafts

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
icons
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes By default, used for as the source for "Add to home screen" (see bug 1234558).
Disabled From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Document Tags and Contributors

Tags: 
Contributors to this page: wbamberg, stenrap, chrisdavidmills, bershanskiy
Last updated by: wbamberg,