1174589 - Handle link rel icon when attribute mask is present

Status: NEW

(Core :: General, defect)

Description

[Karl Dubost💡 :karlcow]

(probably to be put on the right component)

Anthony Ricaud (:rik) from bug 366324 comment #64:
> Twitter is providing a black icon [1]. I think this is related to Safari 9
> pinned tabs implementation [2]. 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.
> 
> [1] https://abs.twimg.com/a/1434065683/img/t1/favicon.svg
> [2] 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

Comment 1

[Karl Dubost💡 :karlcow]

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)

Comment 2

[Karl Dubost💡 :karlcow]

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

Comment 3

[Karl Dubost💡 :karlcow]

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

Comment 4

[Daniel Holbert [:dholbert]]

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

Comment 5

[Binyamin]

(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

Comment 6

[Daniel Holbert [:dholbert]]

(thanks, sorry for pasting wrong link)

Comment 7

[Nicolas Hoizey]

According to this message[1]:

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

[1] https://forums.developer.apple.com/thread/4615

Comment 8

[Karl Dubost💡 :karlcow]

With your help Nicolas, Anne created https://github.com/whatwg/html/issues/110
Thanks a lot for the update. Useful.

Comment 9

[Nicolas Hoizey]

You're welcome Karl, happy to help! ;-)

Comment 10

[j.j.]

This bug is obsolete and should be closed.

Comment 11

[:Gijs (away/busy until Mar 10)]

(In reply to j.j. from comment #10)

This bug is obsolete and should be closed.

Anne, can you clarify what the status of the colorized icon stuff is? Thanks.

Comment 12

[Anne (:annevk)]

Gijs, the markup mentioned in comment 7 is supported by Safari, web developers are allowed to use it per https://github.com/whatwg/html/pull/2230, but no processing model is defined as thus far no browser other than Safari is interested in implementing it. If we were interested in implementing rel=mask-icon + color we could ask a processing model to be added to the HTML Standard. And hopefully Apple could share some tests.