New issue
Advanced search Search tips
Starred by 26 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocked on:
issue 112941



Sign in to add a comment

Chrome loads all favicon pictures (<link rel="icon">)

Reported by philippe...@gmail.com, Dec 2 2013 Back to list

Issue description

Chrome Version       : 31.0.1650.57 (Build officiel 235101) m
Other browsers tested:
     Safari 6: OK
  Firefox 20: FAIL (see https://bugzilla.mozilla.org/show_bug.cgi?id=751712)
       IE 7/8/9/10: N/A

What steps will reproduce the problem?
1. Create a page with the following code:
  <html>
    <head>
      <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
      <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
      <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
      <link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />
      <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
    </head>
    <body>
      <h1>Some site...</h1>
    </body>
  </html>
2. Create the corresponding pictures. Tip: RealFaviconGenerator.net can help you do this.
3. Put this page online (eg. local Apache instance).
4. Visit this one-page web site and monitor web server's logs.

What is the expected result?
Only one picture should be loaded. On Windows, this should probably be the 16x16 picture.

What happens instead?
The 5 PNG pictures (rel="icon") are all loaded.

Note that this issue is related to https://code.google.com/p/chromium/issues/detail?id=112941 : as soon as the "sizes" attribute will be supported, the present bug will be fixed as a side effect.

Sample Apache log when accessing the page:
192.168.0.12 - - [02/Dec/2013:17:31:13 +0100] "GET / HTTP/1.1" 200 672 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36"
192.168.0.12 - - [02/Dec/2013:17:31:13 +0100] "GET /favicon-32x32.png HTTP/1.1" 200 1054 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36"
192.168.0.12 - - [02/Dec/2013:17:31:13 +0100] "GET /favicon-196x196.png HTTP/1.1" 200 11639 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36"
192.168.0.12 - - [02/Dec/2013:17:31:13 +0100] "GET /favicon-160x160.png HTTP/1.1" 200 5170 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36"
192.168.0.12 - - [02/Dec/2013:17:31:13 +0100] "GET /favicon-96x96.png HTTP/1.1" 200 3291 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36"
192.168.0.12 - - [02/Dec/2013:17:31:13 +0100] "GET /favicon-16x16.png HTTP/1.1" 200 1156 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36"

 
This issue is present on Windows, Android and probably iOS. It should probably be re-categorized.

Comment 2 by tkent@chromium.org, Dec 4 2013

Labels: Cr-Blink-Loader Cr-Blink-HTML

Comment 3 by tkent@chromium.org, Aug 18 2015

Blockedon: chromium:112941
Labels: -OS-Windows OS-All
Status: Available (was: NULL)
This looks like it changed. WebPagetests's Chrome (45.0.2454.101) is now only downloading the 16x and 32x PNGs from realfavicongenerator.net: http://www.webpagetest.org/result/151015_8K_12BX/1/details/

Might be that it uses both in the interfaces somewhere, or a DPR thing. Either way, a huge improvement.

Comment 5 by y...@yoav.ws, Oct 15 2015

Cc: y...@yoav.ws
I don't think anyone fixed this on purpose. What I suspect is that we are simply downloading only the first two icons we encounter. Otherwise the `sizes` value is parsed but nothing is done with it.

How bad of an issue is this in real life? Do many pages include multiple icons?
It surely sounds pretentious from the author of RealFaviconGenerator, but I think the answer is yes.

RealFaviconGenerator generated more than 600,000 favicons since its creation two years ago. The WordPress plugin has 80,000 active installs. For example, the favicon of the Alphabet web site (https://abc.xyz/) was apparently created by RealFaviconGenerator. Sure, this is a one-page site for investors only, but it is a sign that some people at Google are okay with the idea of having multiple PNG icons.

And it's not only RealFaviconGenerator. During the last two years, at least 5 "next-gen" generators appeared. All of them generate 20-something pictures, among them several PNGs. Including favicon-generator.org which is the first result when you google "favicon generator".

In addition to the "classic" 16x16 and 32x32 icons, some browsers document specific sizes. Although most recent versions of Android Chrome rely on a manifest, previous versions look for a 192x192 PNG icon (https://developer.chrome.com/multidevice/android/installtohomescreen). Coast by Opera expects a 228x228 icon (https://dev.opera.com/articles/opera-coast#your-web-apps-image-and-preferred-size). Google TV specifies (or used to specify; the reference disappeared) a 96x96 icon.

Latest Safari released with Mac OS X El Capitan defines a new icon for pinned tabs. Yep, this is off-topic because this icon is not a PNG picture. But this is another case of "yet another icon", a sign that browsers should take care of the declarations instead of picking the first or last icon. The multiplication of heterogeneous platforms increases the amount of icons.

As an aside, Firefox suffers from the same kind of issue (https://bugzilla.mozilla.org/show_bug.cgi?id=751712). As pointed out at https://github.com/RealFaviconGenerator/realfavicongenerator/issues/176, FF not only loads all PNG icons, it loads them on the critical path. I don't know if this this the same for Chrome.

I hope my comment is long enough to convince you of the importance of this issue ;)

Comment 7 by y...@yoav.ws, Oct 15 2015

Fair enough :)

Looking at WPT using Nexus 5, and different set of icons is picked (180 and 192): http://www.webpagetest.org/result/151015_HQ_179A/1/details/ so maybe I'm wrong and `sizes` is taken into account in some way.

In any case, icons are downloaded after everything else is done (and after the onload event) so certainly not in the critical path.

Comment 8 by tkent@chromium.org, Jun 8 2016

Components: -Blink>HTML Blink>HTML>Link
My apologies for potentially reawakening this bug, but it would appear it is not fixed.

https://www.webpagetest.org/result/170326_H4_HPN/1/details/#waterfall_view_step1 (copied here for posterity) shows five sizes of favicon being loaded after document complete (the blue line).

All sizes of these favicons are not required for one platform: it's wasted resource on the client and the server, and wasted bandwidth. My expectation, as the OP, is that Chrome downloads the sizes it requires, not every single graphic.

The code is:

<link rel="icon" type="image/png" href="/i/st/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/i/st/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/i/st/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/i/st/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/i/st/favicon-16x16.png" sizes="16x16">
waterfall.png
57.5 KB View Download
I can confirm that this is still an issue.
I still can reproduce this on chrome 65. I specified 4 sizes and they all get loaded. I some cases this behaviour may defers loading of other more important resources like background images... 

<link rel="icon" type="image/png" sizes="192x192" href="/img/meta/favicon-192x192.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/meta/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/img/meta/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/img/meta/favicon-16x16.png" />
network.png
375 KB View Download

Sign in to add a comment