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.

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

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