From : Daniel Holbert < : Daniel Holbert < dholbert@mozilla.com



To : WHAT Working Group < : WHAT Working Group < whatwg@whatwg.org

Message-ID : <557E1EEE.5040305@mozilla.com>



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