Favicon.ico is a nice thing, but it can cause a whole lot of trouble when missing or not used properly…

 

What’s favicon.ico ?

Favicon.ico is a Microsoft-invented icon that shows the logo for the Website in the browser’s address bar and next to the site name in the browser’s bookmarks. It was first added to Internet Explorer 4 in 1997 and has since been adopted by all browsers.

Since tabbed browsing was introduced, it’s used as the icon for the tabs as well.

 

So where is the file ?
A browser will, by default, look for it in the site’s root directory. So for http://www.google.com, that’s http://www.google.com/favicon.ico
However, its location can also be specified within the XHTML (of each page) by using one of the following :

(Last 3 not supported in Internet Explorer)

 

The not-so-catastrophic problems

There’s a number of problems associated with favicon.ico – the not-so-catastropic ones are :

• Some favicon.ico files are located on a different URL and use redirects. This means the browser has to make multiple requests to get to the right location. It also means your server gets multiple hits.
  Example : www.wordpress.com/favicon.ico redirects to wordpress.com/favicon.ico, which redirects to en.wordpress.com/favicon.ico, which redirects to www.gravatar.com/blavatar/4e21d703d81809d215ceaabbf07efbc6?s=16&d=http://s2.wp.com/i/favicon.ico, which finally serves the icon – that’s 4 connections and 4 requests for an icon file
• Some sites don’t send the correct mime type when sending the icon. The acceptable mime types are image/x-icon, image/vnd.microsoft.icon, image/png and image/gif. However some just send application/octet-stream or even text-plain. Most browsers seem to have no problem with this, because they use the extension to attempt to parse the type, but it goes against best practices.
  Examples :
  – wordpress.org and thepiratebay.org send an application-octet-stream header
  – ups.com sends a text/plain content-type header, but sends an icon file along – very bad practice !

 

The really bad ones

• Some sites use real icon files, but they’re extremely large, although there’s really no good reason for it.
  Examples :
  – The biggest icon file for sites in the Alexa top 20.000 is www.marketingsherpa.com, providing a 554KByte file… Based on the fact they get about 2.7M pageviews per month (Alexa estimate), we can guestimate they’ll be sending out quite a few GBytes (50 ? 100 ?) of data every month !
  – Flickr.com (Alexa #33) sends a 90KByte .ico file (still over 1100 times larger than the smallest possible icon)
  – WordPress.com has an 11KByte .ico file
• By far the most common problem is a missing favicon.ico file. Although that might not seem like a big problem, it can actually cause massive issues on a high-traffic site.
  Imagine this : if you get 10 pageviews/sec on your server (which is not that much) and your favicon.ico file doesn’t exist, your server will generate a 404 error for every first request. Luckily, browsers such as Firefox 3+ keep a list of which favicons are missing and don’t re-request them, but not all browsers follow this behaviour, meaning if those 404 pages aren’t cached, the icon is requested again on every pageview.
• Let’s make it worse : if you’re using a framework like Zend Framework and you’re redirecting all requests to your framework bootstrap, you might be sending all 404 errors to the bootstrap, so you can show a fancy We’re sorry, that page doesn’t exist or even a page with Did you mean … where you do a search query for potential matches. So what happens when favicon.ico doesn’t exist and hits that search on every request to your site ? Exactly : you get 2 pageviews for every real pageview… and each pageview launches your entire framework bootstrap and in case you’re doing the search thing, it launches a search on your backend DB… ouch !
  Example :
  
  go.com sends a 22Kbyte page with Oops! We’re sorry, but we’re having technical problems. – luckily most subdomains (such as disney.go.com) do have a favicon.ico – otherwise the 46th largest Website in the world would have had quite a bit of traffic and load because of a missing file
• Some sites use png or gif files, often the site’s main logo. Although using png or gif is supported by most browsers and in fact using png will produce the smallest possible icon files (see below), it’s not supported by Internet Explorer. Also, using your company’s main logo image file isn’t the right thing to do, since those files are usually quite large, which means the browser needs to resize the image to a 16x16px or 32x32px image. This doesn’t just use processing power, but it also means the image being sent is a lot larger than required.
• Some sites will use all of the XHTML link tags, causing the browser to download the icon multiple times, especially when each tag refers to a different location (i.e. on a CDN network).

 

Who’s doing it wrong ?
To give you some idea of other big sites doing it wrong :

• hp.com returns an application/octet-stream
• aws.amazon.com uses the link tag implementation, but uses a malformed URL
• citibank.com (and citi.com and many other Citibank domains) displays a 404 page, adding 15KByte. And since they’re using quite a few subdomains, the icon is requested a lot of times. (Note : online.citibank.com does have an icon, so why not copy it to the other subdomains ?)
• apc.com (the UPS brand) shows a 404

 

Some are doing it right

• facebook.com : 152 bytes with 0 redirects
• yahoo.com : 318 bytes with 0 redirects
• ibm.com : 318 bytes with 0 redirects

 

Some of the big shots can do better

It’s actually remarkable to see that sites like Google, Live, Twitter, LinkedIn, AOL, Adobe and Myspace (to name just a few) send out a 1150 byte icon.
Given that Google has tried everything to skim down its main page (including removing </body> and </html> tags, it’s odd they didn’t save the 239 bytes by creating a PNG file and providing that PNG to all non-IE clients (multiply it by 100 million or so hits/day and you get a nice 23TBytes…).

 

A word of advice

It’s quite simple actually : use a favicon.ico file on all your subdomains. If you don’t have an properly created icon for your site, put an empty icon or even just a plain empty 0 bytes file (be careful though, not all browsers like this and will request it over and over again).
In case you’re looking for a small blank icon file, I created a 79 bytes favicon.ico file (actually a PNG, so it won’t work on Internet Explorer) : here you go – they don’t get smaller than this !

In case you want an IE-compatible one : smallest favicon.ico