[whatwg] 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

Received on Monday, 15 June 2015 00:40:45 UTC