Re: [whatwg] Icon mask and theme color

Hi all,

Kornel wrote:

> Safari[…] uses `theme-color` for foreground color of favicons of
> pinned tabs, but other browsers use `theme-color` for background
> colors.

Well, <meta name=theme-color> is not specced as speficially a foreground
or background color; it's a color that user agents may use in any number
of ways to customize their UI when displaying a web page. Safari's use
of theme-color for pinned tabs is consistent with its definition. [1]

> This makes it impossible to have a light theme color that fits
> Chrome's background and a dark pinned icon color that suits Safari[…]

UAs are allowed to automatically adjust the theme color for different
uses, which is intended to address this issue (again, [1]):

>> When using the page's "theme color", user agents MAY adjust the color
>> in UA-defined ways to make it more suitable for particular uses. For
>> example, if a UA intends to use the "theme color" as a background and
>> display white text over it, it may use a darker variant of the "theme
>> color" for that purpose, to ensure adequate contrast.

I think I agree with you that sites should be able to provide more than
one color. That said, I suspect one color hits the 80/20 point and maybe
we shouldn't overthink it.

> 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.

It's compatble with other browsers and the spec of <link rel=icon>. I'll
start a new thread with our proposal in a sec. More on compat below.

Daniel wrote:

> Apple suggests that these new elements 'should be placed before other
> <link rel="icon"> elements to avoid compatibility issues' -- if sites
> follow this guideline, it should make other browsers ignore the markup
> and honor the final "real" favicon.

When there are multiple <link rel=icon>s specified, here's what the spec
currently says user agents must do [2]:

>> If multiple icons are provided, the user agent must select the most
>> appropriate icon according to the type, media, and sizes attributes.
>> If there are multiple equally appropriate icons, user agents must use
>> the last one declared in tree order at the time that the user agent
>> collected the list of icons.

Our proposal is simply to add mask="" to this list of advisory
attributes that are used to determine an icon's appropriateness here.
User agents that don't understand mask="" should continue to pick the
most appropriate icon given the other attributes. If there is a tie, the
last <link rel=icon> wins. That is why we recommend authors put <link
rel=icon mask> first—so that the existing tie-breaking behavior results
in the legacy favicon being chosen.


Ted

1. https://github.com/whatwg/meta-theme-color
2. https://html.spec.whatwg.org/#rel-icon

Received on Monday, 15 June 2015 17:33:35 UTC