A great quick How to Guide:

If you've ever wanted to add a favicon to your website or blog, here is a step-by-step rundown of how it is accomplished.

STEP ONE: Design your favicon image — 

Every favicon icon begins its life as a graphic image and that usually means you will use a graphics program (like Adobe Photoshop or even Microsoft Paint) to create an image with either a "gif," a "jpeg" or a "png" file format extension.

I generally create either a "gif" or a "jpeg" image and I always make sure to start with a "canvas" that is square in shape.

Sure, your favicon can be circular, rectangular or even irregular in its appearance but the browser will output your favicon at a size of 16 pixels by 16 pixels. Because of this, you want to make sure that your canvas is as wide as it is tall or your image will get distorted by the browser when it is displayed.

Also, because the final size is so small, try not to use really small lines or fine type as both will likely disappear when rendered.

STEP TWO: Convert the image into the .ico file format — 

In order for your favicon to display, you must first convert the favicon image to the .ico file format (which stands for "icon") before uploading it to your web server.

There are a number of pieces of software to help you convert the favicon image into the favicon .ico format. However, as there are free favicon generators available online, I don't see a need to download a piece of software to your machine as there is always a potential risk for exposing yourself to some sort of malware.

Whichever path you choose, you will need to convert the image to the .ico format before you can add a favicon to your site.

STEP THREE: Upload your favicon.ico file to your web server

Using an ftp client (or your CPanel's File Manager) you will need to upload the favicon.ico file to your website's root directory.

It's best to put it inside the "root directory" (the same location as your "index" file) and not put it inside of any other folder (aka directory).

Once you've uploaded the favicon.ico file, you're ready for step four.

STEP FOUR: Add one line of code to each of your web pages.

In order for your favicon to appear, the browser must know where to find the file on your server. For this reason, it is vital that you add one line of code, into the "head" section of each of your pages code, to cause the favicon image to display.

The line of code you need to add is:[link rel="shortcut icon" type="image/x-icon" onClick="javascript:pageTracker._trackPageview('/outgoing/article_exit_link');" href="favicon.ico" /]

PLEASE NOTE: You will need to replace the "square brackets" shown at the beginning and end of this code with "angle brackets" (ie ) or the code won't work. I would have included the code in its proper format but it probably would have caused display issues here.

STEP FIVE: You wait!

I admit that this part is a little annoying but you need to know about it none the less. After you add a favicon to your site you will no doubt want to go see how great it looks but you may find that it doesn't appear right away.

Most first-time favicon designers assume they must have done something wrong and start retracing every step but that's not always the case.

I don't know why there is a delay, but if you are using Internet Explorer as your browser, it can take a few days for the favicon icon to appear.

I suggest you check your site in Firefox as it generally shows up faster in that browser than it does in Internet Explorer.

If it doesn't show up in either browser within 2 or three days, I suggest you check your work to make sure you have done everything corrrectly.

Well, now you know how to add a favicon to your website and I hope you have a lot of fun doing so!