There’s a science to adding a favicon to your site, so let’s see how the big boys do it!
We dug around Alexa’s list of the top sites on the web and found that Google, Yahoo!, Live, Baidu, and Blogger simply add a file named favicon.ico to their site root. You won’t find any favicon link elements when viewing the HTML page source of these sites, but if you navigate to, say http://www.google.com/favicon.ico, you’ll see the Google favicon pop up.
As for the other sites on Alexa’s list, here’s what we found out about how they show favicons:
<link href="http://www.insync.co.in/wp-content/uploads/2011/04/q9U99v3_saj.ico" rel="shortcut icon">
<link type="image/x-icon" href="http://www.insync.co.in/wp-content/uploads/2011/04/favicon-vflZlzSbU.ico" rel="icon"> <link type="image/x-icon" href="http://www.insync.co.in/wp-content/uploads/2011/04/favicon-vflZlzSbU.ico" rel="shortcut icon">
<link href="/favicon.ico" rel="shortcut icon">
<link href="http://www.insync.co.in/wp-content/uploads/2011/04/favicon.ico" rel="shortcut icon">
<link type="image/x-icon" rel="shortcut icon" href="http://www.insync.co.in/wp-content/uploads/2011/04/favicon1.ico">
So from the examples we’ve seen on the world’s top-ranked sites, we notice that the link elements found in each HTML head section include a rel attribute shortcut icon and icon, and the link type attribute image/x-icon, the MIME type owned by Microsoft and supported by Internet Explorer and other browsers. It stands to reason that since the favicons of these sites all show in supported browsers, we should follow these somewhat redundant steps to ensure our website icon is shown to the world.
1. After you create an ico image, you’ll want to replace any favicon.ico file(s) found in the root of your site with your own favicon.ico file. Yes, it has to be named exactly and put in the root or else supported browsers won’t automatically find it.
2. If you’re a CMS or platform site ower, you might have a configuration setting that allows you to choose your favicon. The example below was taken from Magento Community Edition 1.4.2, which has such a setting and uses the following PHP code to put your favicon up:
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" /> <link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
Notice how they take our favorite Youtube approach and added two links for each rel attribute.
3. Now for other platforms, you might find your favicon.ico file in a template or system folder. Replace any favicon.ico files found in your template folder(s) with your own. Heads up–you might find more than one!
4. The final step is to now add the favicon link elements to your HTML head if you don’t see them already, which means you may have to edit your template’s index.php file or head.php file to insert the following code:
<link rel="icon" href="www.yoursite.com/link/to/your/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="www.yoursite.com/link/to/your/favicon.ico" type="image/x-icon" />
Of course, make sure to change the favicon link URL to the location you saved your favicon.ico file to, and you should be good to go. As redundant as this seems, it’s pretty much a full proof way of getting your favicon to shown up in all supported browsers. Oh, and don’t forget to add your apple-touch-icon!
