[whatwg] Icon mask and theme color

Apple has released a version of Safari that has a new interpretation of <link rel=icon> and <meta name=theme-color> that conflicts with existing usage on the Web.

Safari (8.1 OS X 11.11) uses `theme-color` for foreground color of favicons of pinned tabs, but other browsers use `theme-color` for background colors. This makes it impossible to have a light theme color that fits Chrome's background and a dark pinned icon color that suits Safari (rdar://21379839).

Additionally Apple introduced a `mask` attribute on the link element that is merely modifying the link relationship, but in a way that is incompatible with other browsers.


To avoid compatibility problems I suggest specifying a way to define icon masks and colors in a way that doesn't conflict with usage on the Web. 

The new Safari is still only a preview, so I hope Apple will switch to a better solution.



To prevent user agents from using theme-color in conflicting ways I suggest defining theme-color to be a background color:

https://github.com/whatwg/meta-theme-color/issues/10

and adding a new meta:

<meta name="icon-mask-color"> to define color for the favicon specifically.


Additionally I suggest defining `icon-mask` link relationship for an icon that user agent can colorize:

<link rel="icon-mask" href="silhouette.svg">

This way authors can control whether they want the icon to be reused as a regular icon, with <link rel="icon icon-mask">, or not, by using this relationship alone.

-- 
Kind regards, Kornel Lesiński

Received on Monday, 15 June 2015 10:19:17 UTC