Rename purpose: badge to purpose: monochrome and expand on it

[NotWoods]

I'd like to experiment with letting PWAs specify the icon that appears in the "Site controls" notification (the silent notification where you can copy the URL). Since Android expects a grayscale icon for notifications, I'd like to have a purpose defined for this case.

We currently have the "badge" purpose. In the spec its defined as:

A user agent can present this icon where space constraints and/or color requirements differ from those of the application icon.

I don't feel like this is clear enough for browsers or developers, and no browser currently supports this purpose type.

---

There's been some discussion on this in multiple issues that I'll try to summarize here.

• The badge type was first proposed in Adding the webapp's badge to the manifest #480, and named after the badge field in the Notifications API.
• When Shortcuts were added in Add shortcuts feature to the explainer and spec #768, we had some discussion about how different platforms have different shortcut styles and @mgiuca proposed a "monochrome" purpose.
• Support different shortcut icon requirements/guidelines on different platforms #795 was spun off to discuss this more, specifically for Shortcuts.
• I've outlined some potential future uses of a "monochrome" purpose in Clarify the purpose of purpose: badge #808, but I just want to focus on Site controls for now.

---

I'd like to propose that we specify monochrome icons as images where all the r,g,b color information is removed and only the alpha is kept. Browsers can then apply whatever color is needed by the OS, or let the OS handle the tinting. This has the added benefit of letting developers potentially reuse their transparent PWA icons by specifying purpose: "monochrome any" if the silhouette is distinct.

If no monochrome icon is available, the browser may choose to create a fallback. For Safari's pinned tabs, icons are converted automatically. In this example, Facebook has not specified any special icon.

In the case of Site controls, it also makes sense for the browser to show a default icon like its logo or the PWA logo, as Chrome and Firefox currently do.

To best handle different use cases, the browser may also add padding to the icon depending on where it is used. In the notification, no padding is needed. If the icon is used in a shortcut on Android, the browser may add padding so that it lines up with platform conventions.

[NotWoods]

@mgiuca I'd like to hear your thoughts on this 😄 I've opened a new issue since this is a separate use case from shortcuts.

[mgiuca]

Hi Tiger,

Thanks for opening this discussion. I am pretty sure you meant rename to "monochrome", not "maskable" (???), so I've gone ahead and renamed the issue. :) This is a bit of a dupe of #795 but since that discussion is very long and shortcut-focused, happy to start a fresh one here. However, readers should be aware that this was litigated a fair bit on #795.

I completely agree with the proposal here. Happy to work on spec language for it (you can do it and I can review it, or I can do it with your review if you're happy for me to take it). We need to specify exactly the format of a monochrome icon so that UAs can adapt it for their various purposes, e.g. Safari wants to make a grey gradient, Windows might want to change the icon's foreground color to the app's theme_color, etc, etc. But in order to do that, we need to establish a contract between the developer and the UA, so that for example it's well defined what the foreground pixels and the background pixels are.

I'm happier to go with your suggestion of ignoring RGB pixel colour and just looking at the alpha channel (over my previous suggestion on #795 to ignore alpha and ask for icons to be greyscale). It does make the icons a little harder to author, but it's much less ambiguous (for example, we don't need to worry about what happens if we find a non-grey pixel; we just totally ignore RGB channels and only look at alpha).

So the specifics would be that the UA MUST NOT look at the RGB channels of the pixel data (developers are recommended to set all pixels to black, but it doesn't matter). It SHOULD treat the alpha channel with opaque = foreground colour, and transparent = background colour. UAs are free to manipulate the image however they see fit, for example, converting the transparency into a solid colour, or setting all of the RGB pixel data to white, or to the app's theme colour.

[NotWoods]

I would like to take on writing the spec here 😃 I'll let you know when it's ready for review.

[mgiuca]

Cool, thanks!