What is a Favicon

A favicon or 'favorite icon' is an icon that is associated to a web page. The icon can be found next to the URL in the address bar and also in other places such as bookmarks and tabs in tabbed browsers. The favicon is by no means a requirement on any site, but adds a nice touch and character to your site. When the favicon was first invented it was required that the file be named favicon.ico. This requirement no longer exists however, in most cases the icon will still be named favicon.ico.

Creating a favicon

Since the ico format is created by Microsoft, support for creating your own ico file can be a challenge.

The simplest way to create an ico file is to create a square image (width and height are the same) using any of your favorite image types. Remember that the favicon is a small resolution image, so simple is better.

Using an online resource such as:
http://www.chami.com/html-kit/services/favicon/
http://tools.dynamicdrive.com/favicon/

Upload your image then download the favicon.

We chose the first site, thank-you chami!

Displaying the favicon

In the <head> content... </head> section of your web page add the following line:

<link rel="shortcut icon" href="/favicon.ico" />

This assumes that the favicon.ico file is located in your root directory. You can also use a full URL in place of the current href. For example this site uses:

<link rel="shortcut icon" href="http://www.masteryofthenet.com/favicon.ico" />

Summary

Having a favicon is one of the simplest ways to improve the look of your site while making it look more professional and its so simple that anyone can do it.

Posted on April 10, 2008