How to have a 'FavIcon' for your website!

Vaughn · #1 (**permalink**) 01-18-2006

Hello there!

You must have come across many sites that have a small icon right before the beginning of the URL. See below:

The same is also displayed in the 'Favorites' ('Bookmarks' if you are using FireFox) menu. See below:

In this tutorial, I will demonstrate how to have such an icon for your own website. To begin with, you will need a small icon that you wish to set as the 'FavIcon'. It should be 16x16 in size. If you don't have an icon with you, I suggest you try Google to find such icons. Once such site from where you can download these types of icons is mentioned below:

http://www.clickfire.com/content/graphics/favicons/

If you have images on your local system which you wish to use as icons then you can download converters available on the web to accomplish this. IrfanView is one such free graphic converter that I would recommend.

Once you have the icon ready, rename it to favicon.ico and upload it to your wwwroot folder if you are having windows hosting or public_html if linux.

Next, you will need to add the below line of code in between the <HEAD> and </HEAD> tags in your pages. You should include this line in at least the default page of your website:

Code:

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

Below is a sample code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<title>My WebSite</title>
</head>

Believe it or not, you're done! Try visiting your site, the icon will be displayed now.

Notes:
1. Make sure that you specify the name of the file in the same case as the original file or it will not work on linux servers.
2. There have been instances where the icon does not get immediately displayed. This is a know issue of certain browsers.
3. Please read the terms and conditions of any website carefully before downloading any content.

Cheers!

Manuel_ · #2 (**permalink**) 06-14-2006

Thanks for the sharing it!!!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)