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?