WebPagetest Forums
Favicons - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Optimization Discussions (/forumdisplay.php?fid=5)
+--- Thread: Favicons (/showthread.php?tid=530)

Pages: 1 2

Favicons - Geebee - 02-05-2011 02:05 AM

Ok, lets discuss a tiny small performance tweak this weekend :-)! The favicon.

I think this: the favicon should be small, no bigger than 1KB. So that it can load very fast. For that reason we use a favicon of 318 bytes on our website...

Preferrably put this favicon in the root of your site, and let browsers deal with it. This is better than linking to the favicon in the html because that line of code makes your html (a tiny tiny bit) bigger with no extra benefit.

But today I saw this:

<link rel="shortcut icon" type="image/gif" href="data:image/gif;base64,R0lGODlhEAAQAIAAAAAAAAAAACH5BAkAAAEALAAAAAAQABAAAAIgjI+py+0PEQiT1lkNp​ppnz4HfdoEH2W1nCJRfBMfyfBQAOw=="/>

This is a favicon in base64 encoding? Is this an even better way to do a favicon?

RE: Favicons - pmeenan - 02-05-2011 03:26 AM

Cool, never seen a favicon in a data URI before. That should work for IE > 8, Chrome and Firefox. If the file is small enough it could be a win but you're adding that to EVERY html response so it probably makes first view faster but could be less than optimal for a repeat visit.

It could be an example of over-optimizing since the browsers generally lazy load the favicon anyway and it doesn't interfere with the page content (so as a net this would actually be slower than not referencing one).

RE: Favicons - aaronpeters - 02-07-2011 05:51 PM

I would not do it.
IE lazy loads the favicon (after onload) and FF will also lazy load it, if you do *NOT* put a link tag in the HTML (and of course, the favcion.ico file must be in the root).

RE: Favicons - Spletnapot - 02-13-2011 02:56 PM

Favicon is is usually so small that makes little difference in loading time. There probably should be set some cache time for favicon and other images on site. Just not in the head-meta tags, preferably via servers .htaccess file.

RE: Favicons - duncan - 04-14-2011 06:57 PM

Ive finally decided to add a favicon on a client site. It was working when I first I uploaded the files to public_html

But now it doesnt.

Html code: <link rel="Shortcut Icon" href="Images/EM.ICO">
Or do I need to change it to: <link rel="Shortcut Icon" href="Public_Html/Images/EM.ICO"> ?

Duncan - StraightSilver

RE: Favicons - pmeenan - 04-14-2011 08:48 PM

Where is the document? You can use relative URLs just like with images. I do think you need 2 different entries to support various browsers. This is what mine looks like:

<link rel="shortcut icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="/images/favicon.png" type="image/png">

RE: Favicons - jesper_mortensen - 04-15-2011 07:28 AM

(04-14-2011 08:48 PM)pmeenan Wrote:  I do think you need 2 different entries to support various browsers.

More or less, yes. You don't strictly need the 2 versions that you show, because the ICO format is understood by every major desktop browser. But you might want to have 2 links nevertheless, one for desktop browsers, and one for Apple's proprietary Apple Touch Icon which is used by iPhones, iPads etc.

So I would recommend (in HTML4 / HTML5 syntax):
<!-- Major desktop browsers -->
<link rel="shortcut icon" href="/images/favicon.ico">

<!-- Apple specific -->
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

or alternatively for sites which use both HTTP and HTTPS ("//" is a shortcut for the same HTTP/HTTPS as the HTML page itself has):

<link rel="shortcut icon" href="//www.company.com/images/favicon.ico">
<link rel="apple-touch-icon" href="//www.company.com/images/apple-touch-icon.png">

(If the website in question is using a CDN, the favicons should be served over the CDN and the URLs above adapted to this.)

3 quick side notes about favicons:
  • The ICO format is actually a container which can have multiple resolutions in it (16x16, 32x32, et cetera). Keep this in mind when making the ICO.
  • The type="image/vnd.microsoft.icon" should not be necessary, since any modern web server ought to recognize the .ico file extension and serve the favicon itself with the correct MIME type.
  • rel="shortcut icon" is actually not standards-compliant HTML markup (the space between the two words). But it works, and is understood by every browser AFAIK.

RE: Favicons - Marvin - 04-16-2011 12:41 AM

Quote:If the website in question is using a CDN, the favicons should be served over the CDN

I have just performed several tests comparing the load speed of my home page:

- when my favicon.ico is located in the root of my www, and there's no path to favicon.ico in the header


- favicon.ico served from CDN, and path to it is defined in the header.

I can clearly see that the Time To First Bite + Content Download for the favicon.ico itself is shorter when the .ico is served from my CDN. (The difference for the single .ico file, when tested in a far away location, São Paulo, Brasil, is 175 ms versus 225 ms.) However, even after performing over 30 comparison tests, I'm unable to determine if the over all page load speed is now better, unchanged, or worse. Neither am I able to determine if the .HTTP file's speed is now better, unchanged, or worse.

The problem with testing these very small changes is that the results are being interfered by the changes in DNS Lookup speed and Initial Connection speed, which both may vary from test to test.

I think if there was a way to see test results which would exclude both, DNS Lookup speed and Initial Connection speed, it could be clearer to see if very small changes done to the page affect the load time in a positive or negative way.

After doing my tests, not really understanding the overall impact of adding the extra line to the header, I decided to revert the change, remove the line of code, and return to serving the .ICO from www.

RE: Favicons - pmeenan - 04-16-2011 01:09 AM

Yeah, I wouldn't really bother with it, most browsers lazy-load it anyway.

One of the things we're working on is to integrate Web Page Replay (http://code.google.com/p/web-page-replay/) into WebPagetest so you can eliminate all of the real-world variability and test just front-end changes in isolation. It won't be useful for things like CDN testing but it will eliminate the network variability for things like your html change.

RE: Favicons - Marvin - 04-16-2011 01:37 AM

Thanks, Pat!