A website’s “favorites icon” or “bookmark icon” is an often-overlooked element on a web page. Web designers and developers implement this simple image in different ways. In this article, I will explain the differences and the solid way to use your favicon.
Various favicon implementations
Here are some various implementations of favicons for a web page. These various lines of code use the link tag with the relation attribute. Notice how you will see “shortcut icon” some of the time and just “icon” at other times. You may also see no tag at all, yet there will still be an icon in your browser.
1. <link rel="shortcut icon" href="/favicon.ico" /> 2. <link rel="shortcut icon" href="http://domain.com/image.ico" /> 3. <link rel="icon" type="image/gif" href="http://domain.com/image.gif" /> 4. <link rel="icon" type="image/vnd.microsoft.icon" href="http://domain.com/image.ico" /> |
Frequently, you see the image named favicon.ico. In other instances, such as those above, you will see different image file formats and different paths being used. All of these different syntax formats can be quite confusing.
Differences Between “Shortcut Icon” and “Icon”
The proper link relation (link rel="") for making your bookmark icon does not include the word “shortcut.” Shortcut is simply a workaround for Internet Explorer to designate an icon that is not named favicon.ico. A special circumstance for IE? Go figure… You will have to use “shortcut” if you intend on having multiple icons under your web folder.
When using “icon,” you are also able to specify an image type as I do in examples 3 and 4 above. Even though you have the capability of using a tiny JPG or PNG, I highly recommend you make an actual ICO file at favicon.cc. It only takes a minute and you will have a legitimate icon file.
Not Specifying A Favorites Icon
Many sites don’t even bother declaring an icon. This includes http://google.com and http://yahoo.com. All browsers, including Internet Explorer, will simply check for a file at the root (top level) of your website called favicon.ico.
This is why you see so many instances of the icon actually being called favicon.ico. If you look at example #1 up above, you might think it is totally redundant. However, there is an advantage to having the link tag. When you don’t specify the icon at the top of the page, it won’t show up in your browser bar until the page loads.
The Best Choice
If you are setting up an single icon for your site, the choice is simple.
- Generate an .ico file at favicon.cc
- Save it to the root of your website
- DO use a link tag in your page head so that your icon will appear early
<link rel="icon" href="/favicon.ico" /> |
If you need multiple icons for various pages or subdomains, then you will have to add the dumn “shortcut” back to your tag in addition to specifying a path to a specific ICO file.
<link rel="shortcut icon" href="path/to/icon.ico" /> |
That does it! Hope that clears up any confusion. By the way, this works for both HTML4 and HTML5 and your code will remain completely valid.
I have some problem to add the shortcut icon on my site “www.mobwiki.com”. This shows properly on google chrome, but not in firefox. But the image is already in server ‘http://www.mobwiki.com/favicon.ico’. Please help me to sort this out.
It shows up fine in Firefox
Where is the best place to put the link code itself? In the head tags?
Correct, the proper spot would be in the
tag above any scripts and stylesheets so that it loads early.Do you guys have an opinion on whether the URL of the icon file should be in absolute (as in http://www.example.com/favicon.ico ) or relative ( /favicon.ico ) form in the tag?
The output of the URL wont matter. I use relative for the sake of being shorter.
Thanks! I was just curious if some user agents could get “confused” (for lack of a better word) between, for example, a non-www and www versions of the site. Say, you type “example.com” in the address field and the favicon.ico for non-www would load. Then the browser would receive a redirect to www- version of the same site but they may not get a favicon.ico again. I guess, the concern may not even be so much with your “normal” browsers like IE, Firefox etc, as with other things that crawl your site and take favicon.ico along. For example, RSS readers often do that. So, if there was a more reliable way to ensure that a little tiny piece of your branding comes along with your syndicated content, I would use it. Hope it makes sense 🙂 Anyhow, I’ll just have to try it both ways on a couple of sites and see if I can detect any difference in results.
Cheers!
If your server is set up properly and you use a relative path, you don’t need to be concerned about that.