Closed Bug 1174552 Opened 5 years ago Closed 5 years ago

Twitter reliably loads with a black SVG favicon instead of their blue ICO favicon. (They provide both.)

Categories

(Web Compatibility :: Desktop, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: dholbert, Unassigned)

References

Details

Spinning this off of bug 366324:

Guilherme Lima from bug 366324 comment #63:
> On today's Nightly, Twitter favicon is always black!

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

As with Yelp in bug 1174548, Twitter is linking to its favicons in the reverse order of what Apple recommends in its [2] developer documentation page.

Twitter source:
{
<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">
}

I don't know if reversing that order would help or not, or if there's any other way for them to reliably get Safari to recognize their all-black SVG favicon while not messing up other browsers.
We used the last icon we see so if sites followed Apple's documentation Firefox wouldn't have a problem:
> "Note: This markup should be placed before other <link rel="icon"> elements to avoid compatibility issues with existing icons."
from https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20
But if they do that, we get a non-SVG icon, so why bother shipping bug 366324?
Oh wait, we should probably ignore icons that have a mask attribute.
(In reply to Anthony Ricaud (:rik) from comment #2)
> But if they do that, we get a non-SVG icon, so why bother shipping bug 366324?

They *could* also provide a blue SVG icon. They don't right now, but they could. (That's the answer to "why bother shipping bug 366324".)

For now, the SVG icon that they're providing is broken, on its own, so we definitely don't want to be using it as a favicon.
(In reply to Anthony Ricaud (:rik) from comment #3)
> Oh wait, we should probably ignore icons that have a mask attribute.

Maybe. Seems like a bit of a hack, unless that attribute has a defined "not-a-favicon" meaning.

I emailed the WHATWG to ask for thoughts/suggestion/possible-standardization, BTW:
https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jun/0011.html
We've now got bug 1174589 filed to cover any special handling that we want to do for these tags, BTW.
(In reply to Daniel Holbert [:dholbert] from comment #0)
> 
> As with Yelp in bug 1174548, Twitter is linking to its favicons in the
> reverse order of what Apple recommends in its [2] developer documentation
> page.
> 
> Twitter source:
> {
> <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">
> }
> 
> I don't know if reversing that order would help or not, or if there's any
> other way for them to reliably get Safari to recognize their all-black SVG
> favicon while not messing up other browsers.

They have inverted and now Nightly is showing the blue favicon.
Thanks for the update. I can confirm that the twitter source now has:
{
<link rel="icon" sizes="any" mask href="https://abs.twimg.com/a/1434379534/img/t1/favicon.svg">
<meta name="theme-color" content="#55acee">

  <link href="//abs.twimg.com/favicons/favicon.ico" rel="shortcut icon" type="image/x-icon">
}

So they've got the SVG mask first now, which matches Apple's suggestion & which makes us use the later ICO actual-favicon.

Calling this FIXED.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.