Current time: 12-14-2017, 10:33 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Favicons
02-05-2011, 02:05 AM (This post was last modified: 02-05-2011 02:18 AM by Geebee.)
Post: #1
Favicons
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:

Code:
<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?
Find all posts by this user
Quote this message in a reply
02-05-2011, 03:26 AM
Post: #2
RE: Favicons
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).
Visit this user's website Find all posts by this user
Quote this message in a reply
02-07-2011, 05:51 PM
Post: #3
RE: Favicons
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).
Find all posts by this user
Quote this message in a reply
02-13-2011, 02:56 PM
Post: #4
RE: Favicons
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.
Find all posts by this user
Quote this message in a reply
04-14-2011, 06:57 PM
Post: #5
RE: Favicons
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"> ?


Thanks,
Duncan - StraightSilver
Find all posts by this user
Quote this message in a reply
04-14-2011, 08:48 PM
Post: #6
RE: Favicons
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:

Code:
<link rel="shortcut icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="/images/favicon.png" type="image/png">
Visit this user's website Find all posts by this user
Quote this message in a reply
04-15-2011, 07:28 AM (This post was last modified: 04-15-2011 07:45 PM by jesper_mortensen.)
Post: #7
RE: Favicons
(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):
Code:
<!-- 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):

Code:
<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.
Find all posts by this user
Quote this message in a reply
04-16-2011, 12:41 AM (This post was last modified: 04-16-2011 12:46 AM by Marvin.)
Post: #8
RE: Favicons
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

versus:

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

Marvin
Find all posts by this user
Quote this message in a reply
04-16-2011, 01:09 AM
Post: #9
RE: Favicons
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.
Visit this user's website Find all posts by this user
Quote this message in a reply
04-16-2011, 01:37 AM
Post: #10
RE: Favicons
Thanks, Pat!

Marvin
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)