If an icon contains multiple purposes, it could be used for any of
those purposes. If none of the stated purposes are recognized, the
icon is totally ignored. For example, if an icon has purpose
- "badge fizzbuzz", then it could be used as a badge, but
- if an icon has just the purpose "fizzbuzz", then it will
- be ignored.
+ "monochrome fizzbuzz", then it could be used as a
+ monochrome icon, as "monochrome" is a valid purpose.
+ However, if an icon just has the purpose "fizzbuzz",
+ then it will be ignored.
The steps for processing the `purpose` member of an image @@ -2245,20 +2249,20 @@
In the following example, the web application is listing two icons
- to be used as a badge, one of which is specifically designed for
- the Android platform.
+ to be used as a monochrome icon, one of which is specifically
+ designed for the Android platform.
{
"name": "News",
"icons": [{
"platform": "play",
- "purpose": "badge",
+ "purpose": "monochrome",
"sizes": "16x16",
"src": "icons/badges/android.png",
"type": "image/png"
}, {
- "purpose": "badge",
+ "purpose": "monochrome",
"src": "icons/badges/safari.svg",
"type": "image/svg"
}]
@@ -2319,8 +2323,8 @@
If the icon contains transparent pixels, the user agent MUST
- composite the icon onto a solid color (eg. white) of the user agent's
- choice.
+ composite the icon onto a solid fill (e.g., white) of the user
+ agent's choice.
It is suggested that designers avoid using transparent pixels in
@@ -2401,6 +2405,89 @@
+
+
+ Monochrome icons and solid fills
+
+
+
+ Some platforms enforce that icons be displayed with a
+ solid fill such as a single color, where only the
+ transparency of the icon can be declared in a [=manifest=]. As web
+ applications need to work across multiple platforms, it is possible
+ to indicate that an icon can have an user-agent-specified color
+ applied by adding the monochrome purpose. This allows the
+ platform to ensure that the icon looks well integrated with the
+ platform, and even apply different colors and padding in different
+ places throughout the platform.
+
+
+ When processing a monochrome icon, the user agent MUST NOT
+ independently display the red component, green component, or blue
+ component of a pixel. The user agent SHOULD display each pixel with
+ its original alpha value, but with a red, green, and blue value of
+ the user agent's choosing. It is RECOMMENDED that the user agent use
+ the same color value for all pixels.
+
+
+ Designers of monochrome icons could set all pixels to black
+ and only use transparency to create a silhouette of their icon.
+
+
+ The user agent MAY enlarge the icon by adding additional padding.
+
+
+ The user agent MAY add a background of any color behind transparent
+ pixels, and SHOULD ensure that the background has sufficient
+ contrast with the icon.
+
+
+
+ Example usage of monochrome icons
+
+
+ Usage examples
+
+
+
+ 
+
+
+ Image
+
+
+ The base image with no color.
+
+
+
+
+ 
+
+
+ Gradient fill
+
+
+ The image filled in with a gradient.
+
+
+
+
+ 
+
+
+ Solid color fill with padding
+
+
+ Filled in with the theme color from the manifest.
+
+
+
+
+
+
processing image resources
In the following example, the web application is listing two icons - to be used as a badge, one of which is specifically designed for - the Android platform. + to be used as a monochrome icon, one of which is specifically + designed for the Android platform.
{
"name": "News",
"icons": [{
"platform": "play",
- "purpose": "badge",
+ "purpose": "monochrome",
"sizes": "16x16",
"src": "icons/badges/android.png",
"type": "image/png"
}, {
- "purpose": "badge",
+ "purpose": "monochrome",
"src": "icons/badges/safari.svg",
"type": "image/svg"
}]
@@ -2319,8 +2323,8 @@
If the icon contains transparent pixels, the user agent MUST
- composite the icon onto a solid color (eg. white) of the user agent's
- choice.
+ composite the icon onto a solid fill (e.g., white) of the user
+ agent's choice.
It is suggested that designers avoid using transparent pixels in
@@ -2401,6 +2405,89 @@
+ Monochrome icons and solid fills +
+ ++ Some platforms enforce that icons be displayed with a + solid fill such as a single color, where only the + transparency of the icon can be declared in a [=manifest=]. As web + applications need to work across multiple platforms, it is possible + to indicate that an icon can have an user-agent-specified color + applied by adding the monochrome purpose. This allows the + platform to ensure that the icon looks well integrated with the + platform, and even apply different colors and padding in different + places throughout the platform. +
++ When processing a monochrome icon, the user agent MUST NOT + independently display the red component, green component, or blue + component of a pixel. The user agent SHOULD display each pixel with + its original alpha value, but with a red, green, and blue value of + the user agent's choosing. It is RECOMMENDED that the user agent use + the same color value for all pixels. +
++ Designers of monochrome icons could set all pixels to black + and only use transparency to create a silhouette of their icon. +
++ The user agent MAY enlarge the icon by adding additional padding. +
++ The user agent MAY add a background of any color behind transparent + pixels, and SHOULD ensure that the background has sufficient + contrast with the icon. +
++ Example usage of monochrome icons +
++ Usage examples +
+
+
+
+