1181681 - Flickr loads with a black SVG favicon instead of their blue/pink ICO favicon. (They provide both.)

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Thomas Stache]

+++ This bug was initially created as a clone of Bug #1174548 +++

Same as the Yelp, Pinterest, Twitter bugs.

Comment 1

[Daniel Holbert [:dholbert]]

Quoting their source:

<link rel="shortcut icon" type="image/ico" href="https://s.yimg.com/pw/favicon.ico">
[...]
<link rel="icon" sizes="any" mask href="https://s.yimg.com/pw/images/icon_black_white.svg"/>

So, as with Yelp & Twitter & Pinterest's earlier bugs, they're providing the SVG mask-favicon last (against Apple's recommendation), and that makes us use it over their intended colorful .ico one.

Comment 2

[Daniel Holbert [:dholbert]]

As with the Yelp/Twitter/Pinterest bugs, the easiest fix here is for Flickr to follow Apple's guidelines and provide the new "mask" icon *before* other icons, to avoid issues in other browsers that don't recognize Apple's special mask icon syntax.

Reference:
> Note: This markup should be placed before other <link rel="icon"> elements
> to avoid compatibility issues with existing icons.
https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug

Comment 4

[Daniel Holbert [:dholbert]]

Reached out to @FlickrHelp over Twitter:
 https://twitter.com/CodingExon/status/618867644486152192

Any Flickr devs arriving here: please see comment 1 & comment 2 above for the issue & fix. Thanks!

Comment 5

[Karl Dubost💡 :karlcow]

Contacted Eric Ferraiuolo by mail.
https://github.com/ericf

Comment 6

[Daniel Holbert [:dholbert]]

(I think https://twitter.com/dokas is already working on this, based on responses to my twitter-ping, FWIW)

Comment 7

[Karl Dubost💡 :karlcow]

Eric put me in contact with Phil Dokas who said:

> I deployed a fix for this today :)

Comment 8

[Karl Dubost💡 :karlcow]

Bravo to Flickr Team for the quick response time! <3 from Mozilla.

Comment 9

[Thomas Stache]

That's great news, although it's very inconsistent now.
I can confirm it fixed on the homepage, when logged in - but not in private browsing mode. The fix is also not effective for me on individual photo pages, user pages or the groups page. I still see this markup:

	<link rel="shortcut icon" type="image/ico" href="https://s.yimg.com/pw/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="https://s.yimg.com/pw/apple-touch-icon.png">
	<link rel="icon" sizes="any" mask href="https://s.yimg.com/pw/images/icon_black_white.svg"/>

https://www.flickr.com/groups
https://www.flickr.com/photos/thomasstache/18854262654/

Comment 10

[Daniel Holbert [:dholbert]]

That just means the fix hasn't made it to production yet. (The randomness / first-time-broken-ness you're seeing is bug 366324 comment 45; that bug is fixed in Firefox 40 [currently in Firefox Developer Edition])

Comment 11

[Thomas Stache]

(In reply to Daniel Holbert [:dholbert] from comment #10)
> That just means the fix hasn't made it to production yet. 

I figured that. 

> (The randomness /
> first-time-broken-ness you're seeing is bug 366324 comment 45; that bug is
> fixed in Firefox 40 [currently in Firefox Developer Edition])

I did all my tests on current Nightly and DevEdition builds...

Comment 12

[Daniel Holbert [:dholbert]]

Ah, ok, my mistake.  Did you happen to notice whether the markup being sent (in working & not-working cases) had inconsistent <link> ordering, too? i.e. do you know if you were simply seeing Flickr serving different content, or serving the same content with Firefox rendering it inconsistently? (In the latter case, bug 366324 may not be 100% fixed...)

Comment 13

[Daniel Holbert [:dholbert]]

(In any case, this seems to be fixed on Flickr's end, for me at least -- I'm seeing the colorful favicon at https://www.flickr.com/ and both URLs from comment 9 now, with correct <link> ordering according to Apple's spec [w/ SVG coming first]. So, resolving this as FIXED.)

(This may mean that the inconsistency that Thomas mentioned may be harder to reproduce now, if there is really a Firefox bug involved there.)

Comment 14

[Thomas Stache]

Indeed, now all pages have the fixed markup. Yesterday I saw different markup on different pages, with varying whitespace and linebreaks between the tags. Today it's consistent like this:

	<link rel="icon" sizes="any" mask href="https://s.yimg.com/pw/images/icon_black_white.svg">
	<link rel="shortcut icon" type="image/ico" href="https://s.yimg.com/pw/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="https://s.yimg.com/pw/apple-touch-icon.png">
	<meta name="theme-color" content="black"/>

So, yeah? \o/

Comment 15

[Daniel Holbert [:dholbert]]

(In reply to Thomas Stache from comment #14)
> Yesterday I saw different markup on different pages

Phew, that calms my worries in comment 12. Thanks!  Calling this "VERIFIED" based on your confirmation of fixedness in comment 14.