Apple's new <link rel="icon" mask> not-quite-favicon syntax causing problems in other browsers; needs standardization?

Hi whatwg,

Today I discovered that Apple is introducing a new "pinned tab icon"
feature, which unfortunately co-opts the existing HTML favicon syntax,
and is causing compatibility issues in Firefox Nightly.

BACKGROUND:
Quoting Apple's documentation[1] on this feature:
     # Icons for Pinned Tabs
     # You can set the icon that the user sees when
     # they pin your site by providing a vector image.
     #
-->  # Use 100% black for all vectors [...]
     #
     #  <link rel="icon" sizes="any" mask href="website_icon.svg">
     #
     # To specify the color the icon should be displayed
     # in, add the theme-color meta element to your webpage:
     #
     #  <meta name="theme-color" content="red">

Unsurprisingly, other browsers (Firefox Nightly at least[2]) interpret
these <link> tags as an *actual* favicon, since it's valid syntax for a
favicon.   Meanwhile, we don't recognize <meta name="theme-color">, so
we end up just rendering the SVG favicon -- which is entirely black.

We're currently running into this with Twitter[3], Yelp[4], and
Pinterest[5], which are all early-adopters of this Apple feature.

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.  But unfortunately, these 3 sites
(Twitter, Yelp, and Pinterest) did not follow this guideline.  We can
reach out to these sites, but given that these early-adopters are
already incorrectly using this feature and breaking their favicons in
Firefox (at least), I worry that many more sites will as well, as this
feature gets more adoption.

QUESTIONS:
 (1) Has there been any effort to standardize Apple's syntax for the
pinned-tab-icon feature?

 (2) Is there any interest in standardizing the syntax at this point?
(e.g. perhaps defining that the "mask" attribute on a <link rel="icon">
element means it's *not* a favicon? [if this is what Safari does for
non-pinned tabs])

There was a suggestion on one of the bugs that we simply ignore <link>
tags that have a "mask" attribute; this may be what we want to do to
avoid having a zillion site-compat conversations, but I wanted to get
other vendors/spec-authors' opinions before considering this option too
seriously.

Thanks,
~Daniel

[1]
https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20
[2] Note that SVG favicons didn't work reliably in Firefox until recent
Nightlies; this was fixed in
https://bugzilla.mozilla.org/show_bug.cgi?id=366324
[3] Yelp bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1174548
[4] Twitter bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1174552
[5] Pinterest bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1174568

On Mon, Jun 15, 2015 at 12:40 PM, Daniel Holbert <dholbert at mozilla.com>
wrote:

> There was a suggestion on one of the bugs that we simply ignore <link>
> tags that have a "mask" attribute; this may be what we want to do to
> avoid having a zillion site-compat conversations, but I wanted to get
> other vendors/spec-authors' opinions before considering this option too
> seriously.
>

Let's do this now. We can't wait for Apple and/or Web sites to get their
act together.

Rob
-- 
oIo otoeololo oyooouo otohoaoto oaonoyooonoeo owohooo oioso oaonogoroyo
owoiotoho oao oboroootohoeoro oooro osoiosotoeoro owoiololo oboeo
osouobojoeocoto otooo ojouodogomoeonoto.o oAogoaoiono,o oaonoyooonoeo
owohooo
osoaoyoso otooo oao oboroootohoeoro oooro osoiosotoeoro,o o‘oRoaocoao,o’o
oioso
oaonosowoeoroaoboloeo otooo otohoeo ocooouoroto.o oAonodo oaonoyooonoeo
owohooo
osoaoyoso,o o‘oYooouo ofooooolo!o’o owoiololo oboeo oiono odoaonogoeoro
ooofo
otohoeo ofoioroeo ooofo ohoeololo.

Roc, Daniel,

Le 15 juin 2015 à 11:00, Robert O'Callahan <robert at ocallahan.org> a écrit :
> Let's do this now. We can't wait for Apple and/or Web sites to get their
> act together.

Created https://bugzilla.mozilla.org/show_bug.cgi?id=1174589

--
Karl Dubost 🐄
http://www.la-grange.net/karl/