Open Bug 1174589 Opened 6 years ago Updated 3 years ago

Handle link rel icon when attribute mask is present

Categories

(Core :: General, defect)

41 Branch
defect
Not set
normal

Tracking

()

Tracking Status
firefox41 --- affected

People

(Reporter: karlcow, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: dev-doc-needed)

(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
Blocks: 120352
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[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
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! ;-)

This bug is obsolete and should be closed.

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

Flags: needinfo?(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.

Flags: needinfo?(annevk)
You need to log in before you can comment on or make changes to this bug.