From ce81142762925e881c1ff14057471036b980f462 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 9 Jul 2024 00:40:36 -0400 Subject: [PATCH 01/43] update icons page --- files/en-us/web/manifest/icons/index.md | 149 ++++++++++-------------- 1 file changed, 62 insertions(+), 87 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index e9735da85f58ae9..d2826a4112fa407 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -7,19 +7,68 @@ browser-compat: html.manifest.icons {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} - - - - - - - -
TypeArray
+The `icons` manifest member is used to specify one or more image files that serve as iconic representations of your web application in different contexts. These icons represent your web app among a list of other applications. They can also be used to integrate your web app with an operating system's task switcher, system settings, home screen, and other places when an app icon is needed. -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. +## Syntax + +```json +"icons": [ + { + "src": "icon/lowres.webp", + "sizes": "48x48", + "type": "image/webp" + } +] +``` + +### Values + +The value of the `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes. You can add different icons for integration with various operating systems. You can also add icons for splash screens or app notifications. + +### Properties + +Each object in the array includes one or more of the following properties (`src` is the only required property): + +- `src` + + - : A string that specifies the path to the icon image file. If `src` is a relative URL, the path is resolved relative to the URL of the manifest file. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. `src` is a required property. + +- `sizes` + + - : A string that specifies one or more dimensions of the icon. Each dimension is specified as `x`. Mutiple dimensions are separated by spaces, as in `48x48 96x96`. Specifying multiple sizes allows a browser to select the most appropriate one for the context. The `sizes` property uses the same syntax as the [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute of the `` HTML element. This property is optional; if not specifed, the default value of `any` is used, which indicates that the icon can be used at any size. + +- `type` + + - : A string that specifies the media type (also known as the {{Glossary("MIME type")}}) of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. + +- `purpose` + - : A string that specifies one or more the purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. Valid keyword values include `monochrome`, `maskable`, and `any` and are case-sensitive. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in the following order of precedence: + - `monochrome`: Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. + - `maskable`: Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away by a browser. + - `any`: Indicates that the icon can be used in any context. This is the default value. + +## Description + +The context in which an icon can be used is determined by the browser and the operating system, based on the specified sizes and formats. + +When working with icon images, both security and performance are important considerations. + +The browser's ability to fetch an icon image is governed by the Content Security Policy ({{Glossary("CSP")}}) of the manifest's owner document, specifically by the [`img-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive. This security aspect is related to the `src` property. For example, if the `img-src` directive in a CSP header specifies `icons.example.com`, icons from only that domain would be fetchable. In a manifest with two icons, one from `icons.example.com/lowres` and another from `other.com/hi-res`, only the former would be fetched successfully because of CSP restrictions. + +The `type` property plays a part in determining performance. While this property is optional, specifying it can improve performance significantly. It allows browsers to quickly ignore images with formats they do not support. If you don't specify the `type` property, it is recommended to specify clear file extensions for the icon images to ensure correct handling by the browser. ## Examples +### Declaring multiple icons + +This example shows how to declare multiple icons for different scenarios and devices. If an icon for a specific situation is not supported or not available, browsers will fall back to other available formats and sizes. + +- Two icons of the same size (`48x48`) are provided in different formats. The first is explicitly specified as [WebP](/en-US/docs/Web/Media/Formats/Image_types#webp_image) using the `type` property. If a browser doesn't support WebP, it will fall back to the second icon of the same size. For the second icon, the browser will determine the MIME type either from the HTTP header or by inferring it from the image file's content. Icons at this size are typically used for browser tabs and bookmarks. + +- For smaller icons (up to `256x256`), an [ICO](/en-US/docs/Web/Media/Formats/Image_types#ico_microsoft_windows_icon) file is provided. ICO files contain multiple raster icons that are individually optimized for small display sizes. icons at these sizes are commonly used for desktop shortcuts. + +- For larger icons (`257x257` and above), an [SVG](/en-US/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) file is specified. The `sizes` value of this icon is set to `any`, which allows a browser to use this icon at any size. SVG icons maintain their quality at larger sizes. These icons ate ideal for high-resolution displays like in [progressive web apps (PWAs)](/en-US/docs/Web/Progressive_web_apps). + ```json "icons": [ { @@ -42,84 +91,6 @@ The `icons` member specifies an array of objects representing image files that c ] ``` -## Values - -Image objects may contain the following values: - - - - - - - - - - - - - - - - - - - - - - - - - - -
MemberDescription
sizes - A string containing space-separated image dimensions using the same syntax as the - sizes - attribute. -
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 or more of the following values, separated by spaces: -

-
    -
  • - monochrome: A user agent can present this icon where a - monochrome icon with a solid fill - is needed. The color information in the icon is discarded and only - the alpha data is used. The icon can then be used by the user agent - like a mask over any solid fill. -
    • -
  • - 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 {{Specifications}} @@ -127,3 +98,7 @@ Image objects may contain the following values: ## Browser compatibility {{Compat}} + +## See also + +- [Image file type and format guide](/en-US/docs/Web/Media/Formats/Image_types#webp_image) From d53e0294885e4e73742e66a2b87f94abd5079be4 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 12:40:37 -0400 Subject: [PATCH 02/43] Update files/en-us/web/manifest/icons/index.md --- files/en-us/web/manifest/icons/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index d2826a4112fa407..84f897a9fcf8ea1 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -7,7 +7,8 @@ browser-compat: html.manifest.icons {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} -The `icons` manifest member is used to specify one or more image files that serve as iconic representations of your web application in different contexts. These icons represent your web app among a list of other applications. They can also be used to integrate your web app with an operating system's task switcher, system settings, home screen, and other places when an app icon is needed. +The `icons` manifest member is used to specify one or more image files that define the icons to represent your web application. +These icons uniquely identify your web app in different contexts, such as in an operating system's task switcher, system settings, home screen, app listings, and other places when application icons are displayed. ## Syntax From 20c39c28430092ee106d44a7d1849ba21539b7b0 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 13:09:42 -0400 Subject: [PATCH 03/43] Apply suggestions from code review Co-authored-by: Hamish Willee --- files/en-us/web/manifest/icons/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 84f897a9fcf8ea1..e4b75b688cafd25 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -24,9 +24,7 @@ These icons uniquely identify your web app in different contexts, such as in an ### Values -The value of the `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes. You can add different icons for integration with various operating systems. You can also add icons for splash screens or app notifications. - -### Properties +The value of the `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. Each object in the array includes one or more of the following properties (`src` is the only required property): From 44557fae94a9448cb1fec93185d8a3a56f5d7212 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 13:17:29 -0400 Subject: [PATCH 04/43] minor update --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index e4b75b688cafd25..8db52a25d775b86 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -26,7 +26,7 @@ These icons uniquely identify your web app in different contexts, such as in an The value of the `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. -Each object in the array includes one or more of the following properties (`src` is the only required property): +Each object in the array can have one or more of the following properties (`src` is the only required property): - `src` From c65222896c5ca436db58c6965c1b39f47f265c54 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 20:22:32 -0400 Subject: [PATCH 05/43] Apply suggestions from code review Co-authored-by: Hamish Willee --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 8db52a25d775b86..f671cf55c90cfbf 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -38,7 +38,7 @@ Each object in the array can have one or more of the following properties (`src` - `type` - - : A string that specifies the media type (also known as the {{Glossary("MIME type")}}) of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. + - : A string that specifies the {{Glossary("MIME type")}} of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. - `purpose` - : A string that specifies one or more the purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. Valid keyword values include `monochrome`, `maskable`, and `any` and are case-sensitive. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in the following order of precedence: From 169bc475ef53dfa28ab7ec223ef0e9de4dd77aba Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 20:33:19 -0400 Subject: [PATCH 06/43] Apply suggested changes Co-authored-by: Hamish Willee --- files/en-us/web/manifest/icons/index.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index f671cf55c90cfbf..73040022fcf69e9 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -41,10 +41,16 @@ Each object in the array can have one or more of the following properties (`src` - : A string that specifies the {{Glossary("MIME type")}} of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. - `purpose` - - : A string that specifies one or more the purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. Valid keyword values include `monochrome`, `maskable`, and `any` and are case-sensitive. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in the following order of precedence: - - `monochrome`: Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - - `maskable`: Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away by a browser. - - `any`: Indicates that the icon can be used in any context. This is the default value. + - : A string that specifies one or more the purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. + + Valid values (case-sensitive) are listed below, in order of precedence: + + - `monochrome` + - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. + - `maskable` + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away by a browser. + - `any` + - : Indicates that the icon can be used in any context. This is the default value. ## Description From fbb18a8d7092336603a96693b7ec8a98cb4cd366 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 20:36:04 -0400 Subject: [PATCH 07/43] Apply suggestions from linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 73040022fcf69e9..44bd139a973f294 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -42,9 +42,7 @@ Each object in the array can have one or more of the following properties (`src` - `purpose` - : A string that specifies one or more the purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. - Valid values (case-sensitive) are listed below, in order of precedence: - - `monochrome` - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - `maskable` From 527fba32e8f43b0ee918587726ddaec0b026dac6 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 20:40:43 -0400 Subject: [PATCH 08/43] Apply suggestions from linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 44bd139a973f294..e50aeaf5545ebef 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -41,7 +41,8 @@ Each object in the array can have one or more of the following properties (`src` - : A string that specifies the {{Glossary("MIME type")}} of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. - `purpose` - - : A string that specifies one or more the purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. + + - : A string that specifies one or more purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. Valid values (case-sensitive) are listed below, in order of precedence: - `monochrome` - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. From 23bf3f39f87b00da63868ef3b673a8325838007a Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 20:44:51 -0400 Subject: [PATCH 09/43] Update files/en-us/web/manifest/icons/index.md --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index e50aeaf5545ebef..aed0ed3a79366f3 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -43,7 +43,7 @@ Each object in the array can have one or more of the following properties (`src` - `purpose` - : A string that specifies one or more purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. - Valid values (case-sensitive) are listed below, in order of precedence: + Valid values are case-sensitive and listed below in order of precedence: - `monochrome` - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - `maskable` From 4c87d471f4bd7b8e18c07abb1ddb08acc37c77e8 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 19 Aug 2024 20:50:46 -0400 Subject: [PATCH 10/43] Update files/en-us/web/manifest/icons/index.md --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index aed0ed3a79366f3..d56b558e66e8c4a 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -69,7 +69,7 @@ This example shows how to declare multiple icons for different scenarios and dev - Two icons of the same size (`48x48`) are provided in different formats. The first is explicitly specified as [WebP](/en-US/docs/Web/Media/Formats/Image_types#webp_image) using the `type` property. If a browser doesn't support WebP, it will fall back to the second icon of the same size. For the second icon, the browser will determine the MIME type either from the HTTP header or by inferring it from the image file's content. Icons at this size are typically used for browser tabs and bookmarks. -- For smaller icons (up to `256x256`), an [ICO](/en-US/docs/Web/Media/Formats/Image_types#ico_microsoft_windows_icon) file is provided. ICO files contain multiple raster icons that are individually optimized for small display sizes. icons at these sizes are commonly used for desktop shortcuts. +- An [ICO](/en-US/docs/Web/Media/Formats/Image_types#ico_microsoft_windows_icon) file is provided with multiple sizes ranging from `72x72` to `256x256`. ICO files contain multiple raster icons that are individually optimized for various display sizes. Icons at these sizes are commonly used for desktop shortcuts. - For larger icons (`257x257` and above), an [SVG](/en-US/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) file is specified. The `sizes` value of this icon is set to `any`, which allows a browser to use this icon at any size. SVG icons maintain their quality at larger sizes. These icons ate ideal for high-resolution displays like in [progressive web apps (PWAs)](/en-US/docs/Web/Progressive_web_apps). From 34fece83ca48bd66f08535590e2bcb53a5cadf30 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 30 Aug 2024 13:19:40 -0400 Subject: [PATCH 11/43] additional changes --- files/en-us/web/manifest/icons/index.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index d56b558e66e8c4a..886d8c2e1b215f1 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -15,9 +15,10 @@ These icons uniquely identify your web app in different contexts, such as in an ```json "icons": [ { - "src": "icon/lowres.webp", - "sizes": "48x48", - "type": "image/webp" + "src": "iconURL", + "sizes": "widthxheight", + "type": "mimeType", + "purpose": "keywordValue" } ] ``` @@ -32,15 +33,15 @@ Each object in the array can have one or more of the following properties (`src` - : A string that specifies the path to the icon image file. If `src` is a relative URL, the path is resolved relative to the URL of the manifest file. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. `src` is a required property. -- `sizes` +- `sizes` {{Optional_Inline}} - : A string that specifies one or more dimensions of the icon. Each dimension is specified as `x`. Mutiple dimensions are separated by spaces, as in `48x48 96x96`. Specifying multiple sizes allows a browser to select the most appropriate one for the context. The `sizes` property uses the same syntax as the [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute of the `` HTML element. This property is optional; if not specifed, the default value of `any` is used, which indicates that the icon can be used at any size. -- `type` +- `type` {{Optional_Inline}} - : A string that specifies the {{Glossary("MIME type")}} of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. -- `purpose` +- `purpose` {{Optional_Inline}} - : A string that specifies one or more purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. Valid values are case-sensitive and listed below in order of precedence: From 989576b5f8fa0b96cab5bdb43e931d403967a579 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 2 Sep 2024 09:53:46 +1000 Subject: [PATCH 12/43] Update files/en-us/web/manifest/icons/index.md Co-authored-by: Dipika Bhattacharya --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 886d8c2e1b215f1..fee360625b11953 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -35,7 +35,7 @@ Each object in the array can have one or more of the following properties (`src` - `sizes` {{Optional_Inline}} - - : A string that specifies one or more dimensions of the icon. Each dimension is specified as `x`. Mutiple dimensions are separated by spaces, as in `48x48 96x96`. Specifying multiple sizes allows a browser to select the most appropriate one for the context. The `sizes` property uses the same syntax as the [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute of the `` HTML element. This property is optional; if not specifed, the default value of `any` is used, which indicates that the icon can be used at any size. + - : A string that specifies one or more sizes at which the icon can be used, and is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. Each size is specified as `x`. Multiple sizes can be specified, separated by spaces, as in `48x48 96x96`. When multiple icons are available, browsers may use the `sizes` value to use the most suitable icon for a display context. This property is optional; if not specified, the behavior may vary depending on the browser's implementation. For raster images like PNG, specifying exact available sizes is recommended. For vector formats like SVG, you can use "any" to indicate scalability. - `type` {{Optional_Inline}} From c729296bcb09282020d52d425dbd5357b3c4ed21 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 18:03:03 -0400 Subject: [PATCH 13/43] Apply suggestions from code review Co-authored-by: Hamish Willee --- files/en-us/web/manifest/icons/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index fee360625b11953..a22d5868934c9d5 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -15,10 +15,10 @@ These icons uniquely identify your web app in different contexts, such as in an ```json "icons": [ { - "src": "iconURL", - "sizes": "widthxheight", - "type": "mimeType", - "purpose": "keywordValue" + "src": "", + "sizes": "", + "type": "", + "purpose": "" } ] ``` @@ -31,7 +31,7 @@ Each object in the array can have one or more of the following properties (`src` - `src` - - : A string that specifies the path to the icon image file. If `src` is a relative URL, the path is resolved relative to the URL of the manifest file. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. `src` is a required property. + - : A string that specifies the path to the icon image file. If `src` is a relative URL, the path is resolved relative to the URL of the manifest file. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. - `sizes` {{Optional_Inline}} @@ -48,7 +48,7 @@ Each object in the array can have one or more of the following properties (`src` - `monochrome` - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - `maskable` - - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away by a browser. + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. - `any` - : Indicates that the icon can be used in any context. This is the default value. @@ -60,7 +60,7 @@ When working with icon images, both security and performance are important consi The browser's ability to fetch an icon image is governed by the Content Security Policy ({{Glossary("CSP")}}) of the manifest's owner document, specifically by the [`img-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive. This security aspect is related to the `src` property. For example, if the `img-src` directive in a CSP header specifies `icons.example.com`, icons from only that domain would be fetchable. In a manifest with two icons, one from `icons.example.com/lowres` and another from `other.com/hi-res`, only the former would be fetched successfully because of CSP restrictions. -The `type` property plays a part in determining performance. While this property is optional, specifying it can improve performance significantly. It allows browsers to quickly ignore images with formats they do not support. If you don't specify the `type` property, it is recommended to specify clear file extensions for the icon images to ensure correct handling by the browser. +The `type` property plays a part in determining performance. While this property is optional, specifying it can improve performance significantly. It allows browsers to quickly ignore images with formats they do not support. If you don't specify the `type` property, it is recommended to specify appropriate and unambiguous file extensions for the icon images to ensure correct handling by the browser. ## Examples From e5a2350b8a8e929522d789f293b2afcf928fae10 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 18:08:06 -0400 Subject: [PATCH 14/43] replace property names with values --- files/en-us/web/manifest/icons/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index a22d5868934c9d5..e329fd4ba726742 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -29,19 +29,19 @@ The value of the `icons` member is an array of objects. Each object represents a Each object in the array can have one or more of the following properties (`src` is the only required property): -- `src` +- `` - : A string that specifies the path to the icon image file. If `src` is a relative URL, the path is resolved relative to the URL of the manifest file. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. -- `sizes` {{Optional_Inline}} +- `` {{Optional_Inline}} - : A string that specifies one or more sizes at which the icon can be used, and is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. Each size is specified as `x`. Multiple sizes can be specified, separated by spaces, as in `48x48 96x96`. When multiple icons are available, browsers may use the `sizes` value to use the most suitable icon for a display context. This property is optional; if not specified, the behavior may vary depending on the browser's implementation. For raster images like PNG, specifying exact available sizes is recommended. For vector formats like SVG, you can use "any" to indicate scalability. -- `type` {{Optional_Inline}} +- `` {{Optional_Inline}} - : A string that specifies the {{Glossary("MIME type")}} of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. -- `purpose` {{Optional_Inline}} +- `` {{Optional_Inline}} - : A string that specifies one or more purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. Valid values are case-sensitive and listed below in order of precedence: From f9490401f7797f33464264d2edfa44395f8a5a6b Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 18:39:31 -0400 Subject: [PATCH 15/43] Update files/en-us/web/manifest/icons/index.md --- files/en-us/web/manifest/icons/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index e329fd4ba726742..e95971754c25566 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -25,9 +25,9 @@ These icons uniquely identify your web app in different contexts, such as in an ### Values -The value of the `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. +The `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. -Each object in the array can have one or more of the following properties (`src` is the only required property): +Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: - `` From 598aadc0988a5b35748b7a093daeffc525c69859 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 22:45:47 -0400 Subject: [PATCH 16/43] Update desc --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index e95971754c25566..9b72e2421af98a0 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -31,7 +31,7 @@ Each icon object can have one or more properties, with `src` being the only requ - `` - - : A string that specifies the path to the icon image file. If `src` is a relative URL, the path is resolved relative to the URL of the manifest file. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. + - : A string that specifies the path to the icon image file. If `` is relative, the path is resolved relative to the manifest file's URL. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. - `` {{Optional_Inline}} From 30faa7fc92de223bf6c219cfde3f0a7292a41393 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 22:51:35 -0400 Subject: [PATCH 17/43] Apply suggestions from code review --- files/en-us/web/manifest/icons/index.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 9b72e2421af98a0..4f3ebb4696f04c9 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -35,11 +35,19 @@ Each icon object can have one or more properties, with `src` being the only requ - `` {{Optional_Inline}} - - : A string that specifies one or more sizes at which the icon can be used, and is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. Each size is specified as `x`. Multiple sizes can be specified, separated by spaces, as in `48x48 96x96`. When multiple icons are available, browsers may use the `sizes` value to use the most suitable icon for a display context. This property is optional; if not specified, the behavior may vary depending on the browser's implementation. For raster images like PNG, specifying exact available sizes is recommended. For vector formats like SVG, you can use "any" to indicate scalability. + - : A string that specifies one or more sizes at which the icon file can be used. + For raster formats like PNG, each size is specified as `x`. + Multiple sizes can be specified, separated by spaces, for example: `48x48 96x96`. + When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. For raster images, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. + If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. + + Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. - `` {{Optional_Inline}} - - : A string that specifies the {{Glossary("MIME type")}} of the icon. The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. This property is optional; if not specified, a browser typically uses the file extension to determine the image type. + - : A string that specifies the {{Glossary("MIME type")}} of the icon. + The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. + If omitted, browsers typically infer the image type from the file extension. - `` {{Optional_Inline}} From 895d78b22fbe616c63eb9d17f83a7ee79e8428cd Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 22:53:26 -0400 Subject: [PATCH 18/43] fix linter error Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 4f3ebb4696f04c9..2f6b44f0a244880 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -36,12 +36,12 @@ Each icon object can have one or more properties, with `src` being the only requ - `` {{Optional_Inline}} - : A string that specifies one or more sizes at which the icon file can be used. - For raster formats like PNG, each size is specified as `x`. - Multiple sizes can be specified, separated by spaces, for example: `48x48 96x96`. - When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. For raster images, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. - If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. - - Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. + For raster formats like PNG, each size is specified as `x`. + Multiple sizes can be specified, separated by spaces, for example: `48x48 96x96`. + When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. For raster images, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. + If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. + + Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. - `` {{Optional_Inline}} From f43ac55d3599c093217f54777363bb0eb81a874f Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 23:11:16 -0400 Subject: [PATCH 19/43] update --- files/en-us/web/manifest/icons/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 2f6b44f0a244880..552b97009b30c34 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -36,9 +36,9 @@ Each icon object can have one or more properties, with `src` being the only requ - `` {{Optional_Inline}} - : A string that specifies one or more sizes at which the icon file can be used. - For raster formats like PNG, each size is specified as `x`. + Each size is specified as `x`. Multiple sizes can be specified, separated by spaces, for example: `48x48 96x96`. - When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. For raster images, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. + When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. For raster formats like PNG, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. From d65f7248b03f7113f9e0b5534c2cd2f9ae6c9716 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 4 Sep 2024 00:05:19 -0400 Subject: [PATCH 20/43] Apply suggestions from code review --- files/en-us/web/manifest/icons/index.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 552b97009b30c34..7746c6094b2e521 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -51,8 +51,17 @@ Each icon object can have one or more properties, with `src` being the only requ - `` {{Optional_Inline}} - - : A string that specifies one or more purposes of the icon, which indicate how the icon should be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. This property is optional; `any` is assumed if no value is specified. If multiple values are specified, they should be listed in order of precedence. - Valid values are case-sensitive and listed below in order of precedence: + - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. + The value can be a single keyword or multiple space-separated keywords. + If omitted, the browser can use the icon for `any` purpose. + + Browsers use these values as hints to determine where and how an icon is displayed. + For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. + With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. + If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. + However, if only unrecognized purposes are specified (e.g., "fizzbuzz"), those values will be ignored. + + Valid values include: - `monochrome` - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - `maskable` From 051482aa07bb979d153a4a570637c9d0dbede109 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 4 Sep 2024 00:06:52 -0400 Subject: [PATCH 21/43] fix linter error Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 7746c6094b2e521..08fb7fec6d2d861 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -52,16 +52,17 @@ Each icon object can have one or more properties, with `src` being the only requ - `` {{Optional_Inline}} - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. - The value can be a single keyword or multiple space-separated keywords. - If omitted, the browser can use the icon for `any` purpose. - - Browsers use these values as hints to determine where and how an icon is displayed. - For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. - With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. - If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. - However, if only unrecognized purposes are specified (e.g., "fizzbuzz"), those values will be ignored. - + The value can be a single keyword or multiple space-separated keywords. + If omitted, the browser can use the icon for `any` purpose. + + Browsers use these values as hints to determine where and how an icon is displayed. + For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. + With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. + If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. + However, if only unrecognized purposes are specified (e.g., "fizzbuzz"), those values will be ignored. + Valid values include: + - `monochrome` - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - `maskable` From 8298e48bf32cea2863d93dfe5631d6420da2ad41 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 4 Sep 2024 00:22:01 -0400 Subject: [PATCH 22/43] some more tweaks --- files/en-us/web/manifest/icons/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 08fb7fec6d2d861..0638053663dd155 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -53,13 +53,13 @@ Each icon object can have one or more properties, with `src` being the only requ - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. - If omitted, the browser can use the icon for `any` purpose. + If omitted, the browser can use the icon for any purpose. Browsers use these values as hints to determine where and how an icon is displayed. For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. - However, if only unrecognized purposes are specified (e.g., "fizzbuzz"), those values will be ignored. + However, if only unrecognized purposes are specified (e.g., "fizzbuzz"), then it will be ignored. Valid values include: From 5540a6d4aa01180ec964c6968554937ed140e8d3 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 4 Sep 2024 00:24:04 -0400 Subject: [PATCH 23/43] fix format --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 0638053663dd155..4385c252cf3486a 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -59,7 +59,7 @@ Each icon object can have one or more properties, with `src` being the only requ For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. - However, if only unrecognized purposes are specified (e.g., "fizzbuzz"), then it will be ignored. + However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. Valid values include: From d088619cda009927c522f0e5c2ea890c8365345e Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 4 Sep 2024 00:26:57 -0400 Subject: [PATCH 24/43] one more nit --- files/en-us/web/manifest/icons/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 4385c252cf3486a..4eee38438658666 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -18,7 +18,7 @@ These icons uniquely identify your web app in different contexts, such as in an "src": "", "sizes": "", "type": "", - "purpose": "" + "purpose": "" } ] ``` @@ -49,7 +49,7 @@ Each icon object can have one or more properties, with `src` being the only requ The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. If omitted, browsers typically infer the image type from the file extension. -- `` {{Optional_Inline}} +- `` {{Optional_Inline}} - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. From 3e39e21699c029ca34c9dd14c9952e900b94e837 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 4 Sep 2024 00:56:41 -0400 Subject: [PATCH 25/43] Update See also --- files/en-us/web/manifest/icons/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 4eee38438658666..4c703166ebeea56 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -125,3 +125,5 @@ This example shows how to declare multiple icons for different scenarios and dev ## See also - [Image file type and format guide](/en-US/docs/Web/Media/Formats/Image_types#webp_image) +- [Monochrome icons and solid fills](https://w3c.github.io/manifest/#monochrome-icons-and-solid-fills) +- [Icon masks and safe zone](https://w3c.github.io/manifest/#icon-masks) From 1387694c8e4e7247f0b13ba96ff4d2ddd5454f7e Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:17:56 -0400 Subject: [PATCH 26/43] Apply suggestions from code review --- files/en-us/web/manifest/icons/index.md | 95 +++++++++++++------------ 1 file changed, 49 insertions(+), 46 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 4c703166ebeea56..22a40ad3105f95c 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -23,52 +23,55 @@ These icons uniquely identify your web app in different contexts, such as in an ] ``` -### Values - -The `icons` member is an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. - -Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: - -- `` - - - : A string that specifies the path to the icon image file. If `` is relative, the path is resolved relative to the manifest file's URL. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. - -- `` {{Optional_Inline}} - - - : A string that specifies one or more sizes at which the icon file can be used. - Each size is specified as `x`. - Multiple sizes can be specified, separated by spaces, for example: `48x48 96x96`. - When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. For raster formats like PNG, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. - If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. - - Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. - -- `` {{Optional_Inline}} - - - : A string that specifies the {{Glossary("MIME type")}} of the icon. - The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. - If omitted, browsers typically infer the image type from the file extension. - -- `` {{Optional_Inline}} - - - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. - The value can be a single keyword or multiple space-separated keywords. - If omitted, the browser can use the icon for any purpose. - - Browsers use these values as hints to determine where and how an icon is displayed. - For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. - With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. - If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. - However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. - - Valid values include: - - - `monochrome` - - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - - `maskable` - - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. - - `any` - - : Indicates that the icon can be used in any context. This is the default value. +### Keys + +- `icons` + : - An array of objects. + Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. + Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: + + - `src` + - : A string that specifies the path to the icon image file. + If `src` is relative, the path is resolved relative to the manifest file's URL. + For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. + + - `sizes` {{Optional_Inline}} + - : A string that specifies one or more sizes at which the icon file can be used. + Each `` is specified as `x`. + Multiple `` tokens can be specified, separated by spaces, for example: `48x48 96x96`. + When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. + For raster formats like PNG, specifying the exact available sizes is recommended. + For vector formats like SVG, you can use `any` to indicate scalability. + If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. + + Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. + + - `type` {{Optional_Inline}} + - : A string that specifies the {{Glossary("MIME type")}} of the icon. + The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. + If omitted, browsers typically infer the image type from the file extension. + + - `purpose` {{Optional_Inline}} + - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. + The value can be a single keyword or multiple space-separated keywords. + If omitted, the browser can use the icon for any purpose. + + Browsers use these values as hints to determine where and how an icon is displayed. + For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. + With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. + If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. + However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. + + Valid values include: + + - `monochrome` + - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. + With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. + + - `maskable` + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. + - `any` + - : Indicates that the icon can be used in any context. This is the default value. ## Description From 355a21a984a15efb14e4ab4f56fdeba138ac35e3 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:20:19 -0400 Subject: [PATCH 27/43] fix linter errors Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 71 +++++++++++++------------ 1 file changed, 38 insertions(+), 33 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 22a40ad3105f95c..a9ce4a5d8b21d09 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -27,51 +27,56 @@ These icons uniquely identify your web app in different contexts, such as in an - `icons` : - An array of objects. - Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. - Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: + Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. + Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: - `src` + - : A string that specifies the path to the icon image file. - If `src` is relative, the path is resolved relative to the manifest file's URL. - For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. + If `src` is relative, the path is resolved relative to the manifest file's URL. + For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. - `sizes` {{Optional_Inline}} + - : A string that specifies one or more sizes at which the icon file can be used. - Each `` is specified as `x`. - Multiple `` tokens can be specified, separated by spaces, for example: `48x48 96x96`. - When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. - For raster formats like PNG, specifying the exact available sizes is recommended. - For vector formats like SVG, you can use `any` to indicate scalability. - If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. - - Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. + Each `` is specified as `x`. + Multiple `` tokens can be specified, separated by spaces, for example: `48x48 96x96`. + When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. + For raster formats like PNG, specifying the exact available sizes is recommended. + For vector formats like SVG, you can use `any` to indicate scalability. + If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. + + Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. - `type` {{Optional_Inline}} + - : A string that specifies the {{Glossary("MIME type")}} of the icon. - The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. - If omitted, browsers typically infer the image type from the file extension. + The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. + If omitted, browsers typically infer the image type from the file extension. - `purpose` {{Optional_Inline}} + - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. - The value can be a single keyword or multiple space-separated keywords. - If omitted, the browser can use the icon for any purpose. - - Browsers use these values as hints to determine where and how an icon is displayed. - For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. - With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. - If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. - However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. - - Valid values include: - - - `monochrome` - - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. - With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - - - `maskable` - - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. - - `any` - - : Indicates that the icon can be used in any context. This is the default value. + The value can be a single keyword or multiple space-separated keywords. + If omitted, the browser can use the icon for any purpose. + + Browsers use these values as hints to determine where and how an icon is displayed. + For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. + With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. + If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. + However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. + + Valid values include: + + - `monochrome` + + - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. + With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. + + - `maskable` + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. + - `any` + - : Indicates that the icon can be used in any context. This is the default value. ## Description From f75335f82c043ab6649586904654109893781420 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:23:08 -0400 Subject: [PATCH 28/43] Update files/en-us/web/manifest/icons/index.md --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index a9ce4a5d8b21d09..808624d2316340d 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -26,7 +26,7 @@ These icons uniquely identify your web app in different contexts, such as in an ### Keys - `icons` - : - An array of objects. + - : An array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: From 5a3c9603c9c9bf4ea1b6f82241558c7989dbafb2 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:25:21 -0400 Subject: [PATCH 29/43] fix linter errors Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 808624d2316340d..acd0a2975c05ab4 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -26,9 +26,10 @@ These icons uniquely identify your web app in different contexts, such as in an ### Keys - `icons` + - : An array of objects. - Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. - Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: + Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. + Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: - `src` From c34b2347e88bed17f34d87600b6bc4ae3427ecc3 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:32:30 -0400 Subject: [PATCH 30/43] fix formatting --- files/en-us/web/manifest/icons/index.md | 48 ++++++++++++------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index acd0a2975c05ab4..e2e9428b0dbd3ea 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -31,33 +31,33 @@ These icons uniquely identify your web app in different contexts, such as in an Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: - - `src` + - `src` - - : A string that specifies the path to the icon image file. + - : A string that specifies the path to the icon image file. If `src` is relative, the path is resolved relative to the manifest file's URL. For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. - - `sizes` {{Optional_Inline}} + - `sizes` {{Optional_Inline}} - - : A string that specifies one or more sizes at which the icon file can be used. - Each `` is specified as `x`. - Multiple `` tokens can be specified, separated by spaces, for example: `48x48 96x96`. - When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. - For raster formats like PNG, specifying the exact available sizes is recommended. - For vector formats like SVG, you can use `any` to indicate scalability. - If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. + - : A string that specifies one or more sizes at which the icon file can be used. + Each `` is specified as `x`. + Multiple `` tokens can be specified, separated by spaces, for example: `48x48 96x96`. + When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. + For raster formats like PNG, specifying the exact available sizes is recommended. + For vector formats like SVG, you can use `any` to indicate scalability. + If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. - Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. + Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. - - `type` {{Optional_Inline}} + - `type` {{Optional_Inline}} - - : A string that specifies the {{Glossary("MIME type")}} of the icon. - The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. - If omitted, browsers typically infer the image type from the file extension. + - : A string that specifies the {{Glossary("MIME type")}} of the icon. + The value should be in the format `image/`, where `` is a specific image format; for example, `image/png` indicates a PNG image. + If omitted, browsers typically infer the image type from the file extension. - - `purpose` {{Optional_Inline}} + - `purpose` {{Optional_Inline}} - - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. + - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. The value can be a single keyword or multiple space-separated keywords. If omitted, the browser can use the icon for any purpose. @@ -69,15 +69,15 @@ These icons uniquely identify your web app in different contexts, such as in an Valid values include: - - `monochrome` - - - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. + - `monochrome` + - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - - `maskable` - - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. - - `any` - - : Indicates that the icon can be used in any context. This is the default value. + - `maskable` + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. + + - `any` + - : Indicates that the icon can be used in any context. This is the default value. ## Description From c469630f6eb49ccbd6a11b489dc64b7226f6b289 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:34:25 -0400 Subject: [PATCH 31/43] fix linter errors Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/manifest/icons/index.md | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index e2e9428b0dbd3ea..83b1d8426e5ce75 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -34,8 +34,8 @@ These icons uniquely identify your web app in different contexts, such as in an - `src` - : A string that specifies the path to the icon image file. - If `src` is relative, the path is resolved relative to the manifest file's URL. - For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. + If `src` is relative, the path is resolved relative to the manifest file's URL. + For example, the relative URL `images/icon-192x192.png` for the manifest file located at `https://example.com/manifest.json` will be resolved as `https://example.com/images/icon-192x192.png`. - `sizes` {{Optional_Inline}} @@ -58,8 +58,8 @@ These icons uniquely identify your web app in different contexts, such as in an - `purpose` {{Optional_Inline}} - : A case-sensitive keyword string that specifies one or more contexts in which the icon can be used by the browser or operating system. - The value can be a single keyword or multiple space-separated keywords. - If omitted, the browser can use the icon for any purpose. + The value can be a single keyword or multiple space-separated keywords. + If omitted, the browser can use the icon for any purpose. Browsers use these values as hints to determine where and how an icon is displayed. For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. @@ -69,15 +69,17 @@ These icons uniquely identify your web app in different contexts, such as in an Valid values include: - - `monochrome` - - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. + - `monochrome` + + - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - - `maskable` - - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. - - - `any` - - : Indicates that the icon can be used in any context. This is the default value. + - `maskable` + + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. + + - `any` + - : Indicates that the icon can be used in any context. This is the default value. ## Description From db8799b0def7dcc8c59cdfbc88da790c235125ae Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 9 Sep 2024 23:49:23 -0400 Subject: [PATCH 32/43] fix formatting --- files/en-us/web/manifest/icons/index.md | 30 +++++++++++++------------ 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 83b1d8426e5ce75..a46aed79e357ea1 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -28,7 +28,9 @@ These icons uniquely identify your web app in different contexts, such as in an - `icons` - : An array of objects. - Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. + Each object represents an icon to be used in a specific context. + For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. + Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: - `src` @@ -61,25 +63,25 @@ These icons uniquely identify your web app in different contexts, such as in an The value can be a single keyword or multiple space-separated keywords. If omitted, the browser can use the icon for any purpose. - Browsers use these values as hints to determine where and how an icon is displayed. - For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. - With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. - If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. - However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. + Browsers use these values as hints to determine where and how an icon is displayed. + For example, a `monochrome` icon might be used as a badge or pinned icon with a solid fill, which is visually distinct from a full-color launch icon. + With multiple keywords, say `monochrome maskable`, the browser can use the icon for any of those purposes. + If an unrecognized purpose is included along with valid values (e.g., `monochrome fizzbuzz`), the icon can still be used for the valid purposes. + However, if only unrecognized purposes are specified (e.g., `fizzbuzz`), then it will be ignored. - Valid values include: + Valid values include: - - `monochrome` + - `monochrome` - - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. - With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. + - : Indicates that the icon is intended to be used as a monochrome icon with a solid fill. + With this value, a browser discards the color information in the icon and uses only the alpha channel as a mask over any solid fill. - - `maskable` + - `maskable` - - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. + - : Indicates that the icon is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can be ignored and masked away. - - `any` - - : Indicates that the icon can be used in any context. This is the default value. + - `any` + - : Indicates that the icon can be used in any context. This is the default value. ## Description From 4c6a43625717c95dab399f43846b181dc829f300 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 10 Sep 2024 18:23:12 -0400 Subject: [PATCH 33/43] update keys --- files/en-us/web/manifest/display/index.md | 30 +++++++++++++---------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/manifest/display/index.md b/files/en-us/web/manifest/display/index.md index 4384834f40467c0..9902e70e812226c 100644 --- a/files/en-us/web/manifest/display/index.md +++ b/files/en-us/web/manifest/display/index.md @@ -12,35 +12,39 @@ The `display` manifest member is used to specify your preferred display mode for ## Syntax ```json -"display": "standalone" +"display": "" ``` -### Values +### Keys -The value of the `display` member is a string. The possible values include `fullscreen`, `standalone`, `minimal-ui`, and `browser`. If a browser does not support the specified display mode, it follows a pre-defined fallback chain: `fullscreen` → `standalone` → `minimal-ui` → `browser`. If `display` is not specified, the default value `browser` is used. +- `display` -- `fullscreen` + - : A string with keyword values. If not specified, the default value `browser` is used. The keyword values include: - - : Opens the app with browser UI elements hidden and uses the entirety of the available display area. Use this value for apps where fullscreen engagement is crucial and desired. For example, use it for a game app that can take up the entire screen without any browser controls visible, providing a fully immersive gaming experience. + - `fullscreen` - > [!NOTE] - > The `fullscreen` value of the manifest's `display` member works separately from the [Fullscreen API](/en-US/docs/Web/API/Fullscreen_API). The `fullscreen` display mode changes the state of the entire browser window to full screen, while the Fullscreen API only makes a specific element within the window go full screen. Therefore, a web app can be in `fullscreen` display mode while {{DOMxRef("Document.fullscreenElement")}} is `null` and {{DOMxRef("Document.fullscreenEnabled")}} is `false`. + - : Opens the app with browser UI elements hidden and uses the entirety of the available display area. Use this value for apps where fullscreen engagement is crucial and desired. For example, use it for a game app that can take up the entire screen without any browser controls visible, providing a fully immersive gaming experience. -- `standalone` + > [!NOTE] + > The `fullscreen` value of the manifest's `display` member works separately from the [Fullscreen API](/en-US/docs/Web/API/Fullscreen_API). The `fullscreen` display mode changes the state of the entire browser window to full screen, while the Fullscreen API only makes a specific element within the window go full screen. Therefore, a web app can be in `fullscreen` display mode while {{DOMxRef("Document.fullscreenElement")}} is `null` and {{DOMxRef("Document.fullscreenEnabled")}} is `false`. - - : Opens the app to look and feel like a standalone native app. This can include the app having a different window and its own icon in the app launcher. The browser will exclude UI elements such as a URL bar but can still include other UI elements such as the status bar. For example, use it for a task manager app that opens in its own window without the browser's URL bar, while still displaying the device's status bar for battery and notifications, thereby providing an integrated experience. + - `standalone` -- `minimal-ui` + - : Opens the app to look and feel like a standalone native app. This can include the app having a different window and its own icon in the app launcher. The browser will exclude UI elements such as a URL bar but can still include other UI elements such as the status bar. For example, use it for a task manager app that opens in its own window without the browser's URL bar, while still displaying the device's status bar for battery and notifications, thereby providing an integrated experience. - - : Opens the app to look and feel like a standalone app but with a minimal set of UI elements for navigation. The specific elements can vary by browser but typically include navigation controls like back, forward, reload, and possibly a way to view the app's URL. Additionally, the browser may include platform-specific UI elements that provide functionality for sharing and printing content. Use this value for apps where displaying a minimal browser interface is beneficial. For example, use it for a news reading or other general reading apps that show only the essential browser controls like back and reload buttons, providing a cleaner and less distracting interface. + - `minimal-ui` -- `browser` - - : Opens the app in a conventional browser tab or new window, using the platform-specific convention for opening links. Use this value for apps that are designed to be used within a browser context, where full browser functionality is needed. This is the default value if no `display` mode is specified. + - : Opens the app to look and feel like a standalone app but with a minimal set of UI elements for navigation. The specific elements can vary by browser but typically include navigation controls like back, forward, reload, and possibly a way to view the app's URL. Additionally, the browser may include platform-specific UI elements that provide functionality for sharing and printing content. Use this value for apps where displaying a minimal browser interface is beneficial. For example, use it for a news reading or other general reading apps that show only the essential browser controls like back and reload buttons, providing a cleaner and less distracting interface. + + - `browser` + - : Opens the app in a conventional browser tab or new window, using the platform-specific convention for opening links. Use this value for apps that are designed to be used within a browser context, where full browser functionality is needed. This is the default value if no `display` mode is specified. ## Description After a browser applies a `display` mode to an {{Glossary("application context")}}, it becomes the default display mode for the top-level browsing context. The browser may override this display mode for security reasons or provide users with a means for switching to another `display` mode. +If a browser does not support the specified display mode, it follows a pre-defined fallback chain: `fullscreen` → `standalone` → `minimal-ui` → `browser`. + Use the {{cssxref("@media/display-mode", "display-mode")}} media feature to determine the current `display` mode applied by the browser, which is useful for ensuring your app behaves as expected in different display contexts. Additionally, the `display-mode` media feature allows you to adjust your app's styles based on the `display` mode currently being used. This can help provide a consistent user experience regardless of whether the website is launched from a URL or from a desktop icon. > [!NOTE] From 383ab26de34a0e6c88114cb3f13b86008fdc055a Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 10 Sep 2024 18:27:35 -0400 Subject: [PATCH 34/43] keys in theme_color --- files/en-us/web/manifest/theme_color/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 3caed3f8a40b84d..6c2a1804b06ccac 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -19,9 +19,9 @@ This color application can provide a more native app-like experience for your we "theme_color": "" ``` -### Values +### Keys -- `` +- `theme_color` - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). From db6f219667c1555957de203339a413e49a53002e Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Fri, 13 Sep 2024 10:03:47 +1000 Subject: [PATCH 35/43] Update files/en-us/web/manifest/icons/index.md Co-authored-by: Dipika Bhattacharya --- files/en-us/web/manifest/icons/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index a46aed79e357ea1..3716c63f4ee32bc 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -31,7 +31,7 @@ These icons uniquely identify your web app in different contexts, such as in an Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. - Each icon object can have one or more properties, with `src` being the only required property. The possible values for these properties are: + Each icon object can have one or more keys. Of these, only `src` is a required key. The possible keys include: - `src` From 80a2ca3d2bddd3d735a39c3a55080ec4495aa747 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 13 Sep 2024 15:05:47 -0400 Subject: [PATCH 36/43] update syntax blocks --- files/en-us/web/manifest/display/index.md | 12 ++- files/en-us/web/manifest/icons/index.md | 74 ++++++++++++------- files/en-us/web/manifest/theme_color/index.md | 16 ++-- 3 files changed, 67 insertions(+), 35 deletions(-) diff --git a/files/en-us/web/manifest/display/index.md b/files/en-us/web/manifest/display/index.md index 9902e70e812226c..da447d4735d2108 100644 --- a/files/en-us/web/manifest/display/index.md +++ b/files/en-us/web/manifest/display/index.md @@ -11,11 +11,15 @@ The `display` manifest member is used to specify your preferred display mode for ## Syntax -```json -"display": "" +```json-nolint +/* Keyword values */ +"display": "fullscreen" +"display": "standalone" +"display": "minimal-ui" +"display": "browser" ``` -### Keys +### Values - `display` @@ -68,6 +72,8 @@ As shown in the code below, you can adjust an app's style depending on the `disp ## Examples +### Specifying standalone display mode + The following example manifest file for the web app named "HackerWeb" defines how the app should appear and behave when installed on a user's device. The `display` member is set to `standalone`, which specifies that the app should open in a separate window without the typical browser UI elements like the URL bar. ```json diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 3716c63f4ee32bc..5dbd8b68c10c5ab 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -12,26 +12,44 @@ These icons uniquely identify your web app in different contexts, such as in an ## Syntax -```json +```json-nolint +/* Single icon with the minimum required property */ +"icons": + { + "src": "icon/basic-icon.png" + } + + +/* Single icon with the multiple purposes */ +"icons": + { + "src": "icon/basic-icon.png", + "purpose": "maskable any" + } + +/* Two icons with various properties */ "icons": [ { - "src": "", - "sizes": "", - "type": "", - "purpose": "" + "src": "icon/lowres.png", + "sizes": "48x48" + }, + { + "src": "maskable_icon.png", + "sizes": "48x48", + "type": "image/png" } ] ``` -### Keys +### Values - `icons` - - : An array of objects. + - : An object or an array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. - Each icon object can have one or more keys. Of these, only `src` is a required key. The possible keys include: + Each icon object can have one or more properties. Of these, only `src` is required. The possible properties include: - `src` @@ -106,25 +124,27 @@ This example shows how to declare multiple icons for different scenarios and dev - For larger icons (`257x257` and above), an [SVG](/en-US/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) file is specified. The `sizes` value of this icon is set to `any`, which allows a browser to use this icon at any size. SVG icons maintain their quality at larger sizes. These icons ate ideal for high-resolution displays like in [progressive web apps (PWAs)](/en-US/docs/Web/Progressive_web_apps). ```json -"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": "any" - } -] +{ + "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": "any" + } + ] +} ``` ## Specifications diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 6c2a1804b06ccac..d749fe4ee22454d 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -15,11 +15,13 @@ This color application can provide a more native app-like experience for your we ## Syntax -```json -"theme_color": "" +```json-nolint +/* Valid color value */ +"theme_color": "rebeccapurple" +"theme_color": "#4285f4" ``` -### Keys +### Values - `theme_color` @@ -81,13 +83,17 @@ body { ### Using a named color ```json -"theme_color": "red" +{ + "theme_color": "red" +} ``` ### Using an RGB value ```json -"theme_color": "rgb(66, 133, 244)" +{ + "theme_color": "rgb(66, 133, 244)" +} ``` ### Using a hexadecimal value From 3c9bec8aef1f35af98f9c4d28ab1a7a011fce8d4 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 13 Sep 2024 15:08:14 -0400 Subject: [PATCH 37/43] remove extra line --- files/en-us/web/manifest/icons/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 5dbd8b68c10c5ab..1730427c557fc41 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -19,7 +19,6 @@ These icons uniquely identify your web app in different contexts, such as in an "src": "icon/basic-icon.png" } - /* Single icon with the multiple purposes */ "icons": { From 3e4a9f8bfe82841970812e156ff307d4ad2bb076 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 13 Sep 2024 15:36:17 -0400 Subject: [PATCH 38/43] add more purpuses --- files/en-us/web/manifest/icons/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 1730427c557fc41..8a614d1520c329a 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -19,11 +19,11 @@ These icons uniquely identify your web app in different contexts, such as in an "src": "icon/basic-icon.png" } -/* Single icon with the multiple purposes */ +/* Single icon with multiple purposes */ "icons": { "src": "icon/basic-icon.png", - "purpose": "maskable any" + "purpose": "monochrome maskable any" } /* Two icons with various properties */ From dc047ad2711d290e225647a3afcbb9f17b397682 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 16 Sep 2024 10:49:12 +1000 Subject: [PATCH 39/43] Update index.md - improve some (previously untouched) --- files/en-us/web/manifest/display/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/display/index.md b/files/en-us/web/manifest/display/index.md index da447d4735d2108..8f46ef1d8b232d2 100644 --- a/files/en-us/web/manifest/display/index.md +++ b/files/en-us/web/manifest/display/index.md @@ -52,7 +52,8 @@ If a browser does not support the specified display mode, it follows a pre-defin Use the {{cssxref("@media/display-mode", "display-mode")}} media feature to determine the current `display` mode applied by the browser, which is useful for ensuring your app behaves as expected in different display contexts. Additionally, the `display-mode` media feature allows you to adjust your app's styles based on the `display` mode currently being used. This can help provide a consistent user experience regardless of whether the website is launched from a URL or from a desktop icon. > [!NOTE] -> The value of the `display-mode` media feature reflects the actual `display` mode being used, which might differ from the one requested in the manifest's `display`, because the browser might not support the requested mode. +> The value of the `display-mode` media feature reflects the actual `display` mode being used by the browser. +> This might differ from the mode requested in the manifest, because the browser might not support the requested mode. As shown in the code below, you can adjust an app's style depending on the `display-mode` used. From cf2c944577d9222c9d9b9e1c7a84878a03351cf1 Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Mon, 16 Sep 2024 10:51:20 +1000 Subject: [PATCH 40/43] Update files/en-us/web/manifest/display/index.md --- files/en-us/web/manifest/display/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/display/index.md b/files/en-us/web/manifest/display/index.md index 8f46ef1d8b232d2..792f5dfac1ebf96 100644 --- a/files/en-us/web/manifest/display/index.md +++ b/files/en-us/web/manifest/display/index.md @@ -49,7 +49,7 @@ After a browser applies a `display` mode to an {{Glossary("application context") If a browser does not support the specified display mode, it follows a pre-defined fallback chain: `fullscreen` → `standalone` → `minimal-ui` → `browser`. -Use the {{cssxref("@media/display-mode", "display-mode")}} media feature to determine the current `display` mode applied by the browser, which is useful for ensuring your app behaves as expected in different display contexts. Additionally, the `display-mode` media feature allows you to adjust your app's styles based on the `display` mode currently being used. This can help provide a consistent user experience regardless of whether the website is launched from a URL or from a desktop icon. +The {{cssxref("@media/display-mode", "display-mode")}} media feature can be used to configure your application styles and other behavior based on the current `display` mode. This can help provide a consistent user experience regardless of whether the website is launched from a URL or from a desktop icon. > [!NOTE] > The value of the `display-mode` media feature reflects the actual `display` mode being used by the browser. From 7d5f76556a72ff961eb0e38a1207c591e8239baa Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 16 Sep 2024 16:02:36 -0400 Subject: [PATCH 41/43] update icons value type to array --- files/en-us/web/manifest/icons/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index 8a614d1520c329a..b7ab40a1de20f8d 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -14,17 +14,19 @@ These icons uniquely identify your web app in different contexts, such as in an ```json-nolint /* Single icon with the minimum required property */ -"icons": +"icons": [ { "src": "icon/basic-icon.png" } +] /* Single icon with multiple purposes */ -"icons": +"icons": [ { "src": "icon/basic-icon.png", "purpose": "monochrome maskable any" } +] /* Two icons with various properties */ "icons": [ @@ -44,7 +46,7 @@ These icons uniquely identify your web app in different contexts, such as in an - `icons` - - : An object or an array of objects. + - : An array of objects. Each object represents an icon to be used in a specific context. For example, you can add icons to represent your web app on devices with different screen sizes, for integration with various operating systems, for splash screens, or for app notifications. From 7ea08d2b595d9f1227c62c8ef933c48dda486afd Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 16 Sep 2024 16:33:39 -0400 Subject: [PATCH 42/43] add security and performance sections --- files/en-us/web/manifest/icons/index.md | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index b7ab40a1de20f8d..d6ae01901fe89db 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -8,7 +8,6 @@ browser-compat: html.manifest.icons {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} The `icons` manifest member is used to specify one or more image files that define the icons to represent your web application. -These icons uniquely identify your web app in different contexts, such as in an operating system's task switcher, system settings, home screen, app listings, and other places when application icons are displayed. ## Syntax @@ -24,7 +23,7 @@ These icons uniquely identify your web app in different contexts, such as in an "icons": [ { "src": "icon/basic-icon.png", - "purpose": "monochrome maskable any" + "purpose": "monochrome maskable" } ] @@ -61,14 +60,14 @@ These icons uniquely identify your web app in different contexts, such as in an - `sizes` {{Optional_Inline}} - : A string that specifies one or more sizes at which the icon file can be used. - Each `` is specified as `x`. - Multiple `` tokens can be specified, separated by spaces, for example: `48x48 96x96`. - When multiple icons are available, browsers may use `` to select the most suitable icon for a display context. + Each size is specified as `x`. + If multiple sizes are specified, they are separated by spaces; for example, `48x48 96x96`. + When multiple icons are available, browsers may select the most suitable icon for a particular display context. For raster formats like PNG, specifying the exact available sizes is recommended. For vector formats like SVG, you can use `any` to indicate scalability. - If `` is not specified, the selection and display of the icon may vary depending on the browser's implementation. + If `sizes` is not specified, the selection and display of the icon may vary depending on the browser's implementation. - Note that the format of `` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. + Note that the format of `sizes` is similar to the HTML `` element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute. - `type` {{Optional_Inline}} @@ -104,11 +103,17 @@ These icons uniquely identify your web app in different contexts, such as in an ## Description +Icons uniquely identify your web app in different contexts, such as in an operating system's task switcher, system settings, home screen, app listings, and other places when application icons are displayed. + The context in which an icon can be used is determined by the browser and the operating system, based on the specified sizes and formats. -When working with icon images, both security and performance are important considerations. +## Security considerations + +The browser's ability to fetch an icon image is governed by the Content Security Policy ({{Glossary("CSP")}}) of the manifest's owner document, specifically by the [`img-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive. This security aspect is related to the `src` property. + +For example, if the `img-src` directive in a CSP header specifies `icons.example.com`, icons from only that domain would be fetchable. In a manifest with two icons, one from `icons.example.com/lowres` and another from `other.com/hi-res`, only the former would be fetched successfully because of CSP restrictions. -The browser's ability to fetch an icon image is governed by the Content Security Policy ({{Glossary("CSP")}}) of the manifest's owner document, specifically by the [`img-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive. This security aspect is related to the `src` property. For example, if the `img-src` directive in a CSP header specifies `icons.example.com`, icons from only that domain would be fetchable. In a manifest with two icons, one from `icons.example.com/lowres` and another from `other.com/hi-res`, only the former would be fetched successfully because of CSP restrictions. +## Performance considerations The `type` property plays a part in determining performance. While this property is optional, specifying it can improve performance significantly. It allows browsers to quickly ignore images with formats they do not support. If you don't specify the `type` property, it is recommended to specify appropriate and unambiguous file extensions for the icon images to ensure correct handling by the browser. From 61f3d6b6a63d6d969db7b92c2db1981c55aa27c2 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 16 Sep 2024 17:18:06 -0400 Subject: [PATCH 43/43] apply feedback suggestions --- files/en-us/web/manifest/icons/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/icons/index.md b/files/en-us/web/manifest/icons/index.md index d6ae01901fe89db..cddc37d5f4d76bf 100644 --- a/files/en-us/web/manifest/icons/index.md +++ b/files/en-us/web/manifest/icons/index.md @@ -115,7 +115,10 @@ For example, if the `img-src` directive in a CSP header specifies `icons.example ## Performance considerations -The `type` property plays a part in determining performance. While this property is optional, specifying it can improve performance significantly. It allows browsers to quickly ignore images with formats they do not support. If you don't specify the `type` property, it is recommended to specify appropriate and unambiguous file extensions for the icon images to ensure correct handling by the browser. +Specifying the `type` property can significantly improve performance because it allows browsers to ignore images with unsupported formats more easily. +If you don't specify the `type` property, browsers may need to infer the image format using more resource-intensive methods, such as [MIME sniffing](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing) the file for a signature. + +At a minimum, if you omit the `type` property, use appropriate and unambiguous file extensions for your icon images. ## Examples