Themed/colored icons for web apps

[filips123]

Android 12/13 has introduced a new kind of icons, called themed icons, that change their colors depending on the wallpaper's main color:

Starting with Android 13, you can opt in to themed app icons. With this feature, app icons in supported Android launchers are tinted to inherit the coloring of the user’s chosen wallpaper and other themes. (source, source)

This somewhat extends maskable that are already supported in web app manifests and implemented in most Android browsers. However, it appears that such fully-themed icons are currently not supported for web apps (or at least not documented anywhere I could find). I propose that this feature should be added, but there are some things that need to be cleared on how exactly this should be implemented.

Themed icons appear to be like a combination of "maskable" and "monochrome" icons, already supported by the web app manifest. Because of this, it might seem like an easy solution to let browsers use any icon that has both "maskable" and "monochrome" purposes specified as a themed icon. However, there is currently no way of specifying that a specific icon can only be used for both of those purposes together:

If an icon contains multiple purposes, it could be used for any of those purposes. (source)

This means that, if a web app specifies an icon with both purposes, the browser could also incorrectly (in terms of UX, but correctly according to the specification) use that icon as a normal maskable icon (which would cause a monochrome icon to be displayed where a colored one should be), or as a normal monochrome icon (which would cause it to be displayed without any mask).

So, to solve this problem, there seem to be two solutions. One is to create another icon purpose (for example, "themed"), used only for such themed/colored icons. Another is to add a new syntax to the "purpose" field of the manifest which would allow specifying that both icon contexts must be satisfied in order to use that icon. For example, "maskable-monochrome", which the browser would then interpret and install as a themed/colored icon.

[NotWoods]

"monochrome" was designed to handle this scenario by itself. "maskable" isn't needed at all. We just need Google WebAPK to add support.

For example, Figure 11 in the spec could represent a user themed icon where a gray background and yellow foreground is selected. The operating system can apply any cropping necessary.

Example implementation is available for Android Bubblewrap: https://github.com/GoogleChromeLabs/bubblewrap/pull/650

[filips123]

How are safe zone and cropping/masking of such icons handled? Will the operating system also apply additional padding to prevent parts of the icon from being cropped?

Won't that mean that the size of the actual icon content may be different depending on the mask/style that the operating system uses (and whether themed icons are enabled)? For normal maskable icons, that padding is added by the icon, so the size always appears the same. But for themed icons, I think this might not be the case.

For example, if a monochrome icon was the shape of a square and the operating system also used perfectly square icons, no cropping and padding would be needed, so the provided icon would be the full size of a displayed application icon. However, if the operating system displayed circle icons, it would need to add additional padding around the original icon before masking it to the circle, to prevent parts of the icon from being cropped. This would cause the provided icon to be smaller i.e. represent a smaller portion of the whole application icon.

I hope it's clear what I'm asking. But maybe I'm not correctly understanding how themed icons work...

[mgiuca]

@NotWoods is correct. This is precisely what monochrome icons were designed for.

Note that I don't think these have been implemented by any user agent for main app icons (they are used, e.g. on Android for shortcut icons). That means there's an opportunity for browsers to implement this spec for main app icons when exposed to an environment like Android Themed Icons. It also means sites need to start adding monochrome icons, which we can't expect them to do when no browser supports it. But there's no deficiency in the spec as far as I can see.

I take your point @filips123 that there is no way to specify a combination of "maskable" and "monochrome" at the same time. However, I don't think that's required here. The reason why maskable has a safe zone is because in that context, the OS is cutting a circle shape around a "full bleed" image. The application needs to specify a much larger image than the circle, extending a solid colour or pattern outwards, so that the OS can cut any shape it wishes out of that background.

In the case of monochrome, there is no need for the application to specify any extraneous pixels, since the background is, by definition, transparent. monochrome is much closer to a traditional icon: you have an image size (say 256x256), the icon fills up the entire space, maybe with a small amount of padding, and then the OS embeds that image inside a shape like a circle, leaving as much margin as it wishes. The only difference to a traditional icon is that there is no colour defined in the icon itself (the colour is selected by the OS). I believe that monochrome by itself is perfectly suitable for use as an Android Themed Icon.

Based on the above explanation, I'm going to close this (already implemented). Feel free to reopen or continue discussing if you think there is some aspect of Android Themed Icons that is not covered by monochrome as defined by the Manifest spec.