Is there a way to provide light, dark and tinted variants of apple-touch-icon

Question

iOS 18 is introducing new app icon color variants. In addition to the base icon (light mode) developers can offer icons for dark mode and a tinted option (see updated Human Interface Guidelines).

I was hoping to provide the same options for Web Clips, aka websites added to the home screen via Share > Add to Home Screen. Those are usually set using something like <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">. Apple's documentation is lacking, especially when it comes to the web, and the only relevant article I can find is this one that doesn't seem like it's been updated since 2016.

My one idea was to use a media attribute on the <link> tag, since there's already support for multiple apple-touch-icons for different sizes but this had no effect (I assume the icon is downloaded once at the time you add it to your home screen and so it's not grabbing each version…or it is but it's not also grabbing the media attribute):

<link
    rel="apple-touch-icon"
    href="/apple-touch-icon-light.png"
    sizes="180x180"
    media="screen and (prefers-color-scheme: light)"
>
<link
    rel="apple-touch-icon"
    href="/apple-touch-icon-dark.png"
    sizes="180x180"
    media="screen and (prefers-color-scheme: dark)"
>

Any insight into whether this is (or will be, since iOS 18 isn't out yet) a supported feature and I've just missed the documentation?

Answer 1

It doesn't really answer the question but I found an interesting feature.

AFAIK apple-touch-icon must be pngs. So if you remove the background of the icon, iOS sets one for you respecting your preferences. It's not customizable so it's either full white or some gradient black.

That's actually what happens on the Google Maps app icon:

To go further, Apple doesn't recommend it in its guidelines and I didn't test it, but it should technically be possible to apply different opacities inside your png icon. Maybe that could allow to get close to the Photos app icon:

I guess it's better than nothing...