Open Bug 1174589 Opened 6 years ago Updated 3 years ago
Handle link rel icon when attribute mask is present
(probably to be put on the right component) Anthony Ricaud (:rik) from bug 366324 comment #64: > Twitter is providing a black icon . I think this is related to Safari 9 > pinned tabs implementation . They provide a <meta name="theme-color" > content="#55acee"> for Safari. I don't know if websites can provide SVG > icons with anything else than black to get the same result in Safari but a > normal icon elsewhere. We should reach out to Twitter and Apple here, before > Safari 9 ships. > >  https://abs.twimg.com/a/1434065683/img/t1/favicon.svg >  https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20 This will create webcompat issues. * Twitter Bug 1174552 * Yelp Bug 1174548 * Pinterest Bug 1174568 Daniel Holbert sent an email to whatwg from bug 1174552 comment #5 > I emailed the WHATWG to ask for thoughts/suggestion/possible-standardization, BTW: > https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0011.html
I said "handle" as a precaution, whatever the decision be to implement a similar mechanism than Apple OR to decide to ignore links with mask. Maybe the quickest safe bet is for now to ignore it in some circumstances. And then see what we can do for the future in actually handling for other areas of the UI (Pinned Tabs for example)
As of today 2015-06-15 # Current Twitter Code: <link href="//abs.twimg.com/favicons/favicon.ico" rel="shortcut icon" type="image/x-icon"> <link rel="icon" sizes="any" mask href="https://abs.twimg.com/a/1434065683/img/t1/favicon.svg"> <meta name="theme-color" content="#55acee"> # Current Pinterest Code: <link rel="apple-touch-icon" href="https://s-passets-cache-ak0.pinimg.com/webapp/style/app/common/images/logo_trans_144x144.4d67817d.png"> <link rel="icon" href="https://s-passets-cache-ak0.pinimg.com/webapp/style/app/common/images/favicon.b6b02d9c.png"> <link rel="icon" sizes="any" mask href="https://s-passets-cache-ak0.pinimg.com/webapp/style/app/common/images/pinterest_badge.ccdac53e.svg"> <!-- Removed markup --> <meta name="theme-color" content="#bd081c"> # Current Yelp code: <link rel="shortcut icon" href="http://s3-media2.fl.yelpcdn.com/assets/2/www/img/118ff475a341/ico/favicon.ico"> <link rel="icon" sizes="any" mask href="//s3-media1.fl.yelpcdn.com/assets/srv0/yelp_styleguide/4374c8fd03d1/assets/img/logos/yelp_burst.svg"> <meta name="theme-color" content="#c41200">
And we have already 3 threads about it * [whatwg] Apple's new <link rel="icon" mask> not-quite-favicon syntax causing problems in other browsers; needs standardization? https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/thread.html#msg11 * [whatwg] Icon mask and theme color https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/thread.html#msg14 * [whatwg] A mask="" advisory flag for <link rel=icon> https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/thread.html#msg17
We may not have to do anything here after all. No one seems particularly married to the current syntax (with its compat issues), and there are several suggestions that don't cause compat issues. Quoting Maciej (apple representative)'s latest post: > It seems like the current leading candidate is: > - Change <link rel=icon mask> to <link rel=mask-icon>, https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/ (This would resolve the compat issues on our end.)
(In reply to Daniel Holbert [:dholbert] from comment #4) > Quoting Maciej (apple representative)'s latest post: > > It seems like the current leading candidate is: > > - Change <link rel=icon mask> to <link rel=mask-icon>, This is the correct resource (Apple decision) https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0059.html
(thanks, sorry for pasting wrong link)
According to this message: > The markup changed in Developer Seed 3 and Public Beta 1 to simplify and have better backwards compatibility. Use the following markup instead: > <link rel="mask-icon" href="website_icon.svg" color="red">  https://forums.developer.apple.com/thread/4615
With your help Nicolas, Anne created https://github.com/whatwg/html/issues/110 Thanks a lot for the update. Useful.
You're welcome Karl, happy to help! ;-)
You need to log in before you can comment on or make changes to this bug.