Introduction

Favorite Icons, or favicons for short, are 16px x 16px icons for your website. They are used by web browsers as your website's icon when a visitor bookmarks your website.

Favicons are really simple to make, and because they add to your website's image, there is really no reason not to have them. Look at the address bar to see what it looks like. The image below is what you should see:

Free Favicon Icons: the favicon.ico file

Making a favourite icon is really simple: It is an icon file (i.e., it has a .ico extension). Unlike what some would tell you, icon files are NOT bitmap (.bmp) files that are renamed.

To make a favicon.ico file, you have three options:

• Use a dedicated icon generator program
• Use an online (free) icon generator
• If you use Windows, I will show you how to use two free programs to make your icon!

The favorites icon file has a standard name: favicon.ico. You should name your favicon like that.

Dedicated Favicon Software

For Windows, you can get the shareware program IconEdit Pro.

Online Generator

There is a very basic online favicon generator at http://www.favicon.co.uk/. It works, and if you don't need anything fancy, then it does the job. However, you can do much better for free!

Completely Free Fancy Favicon

This works under Windows, but the idea works for all operating systems. You need MS Paint (that comes free with Windows) and IrfanView. IrfanView is an amazing free image viewer for Windows.

The steps to create your favicon.ico file:

• Create a 16x16 px image in paint, save it as a 24-bit bitmap image (.bmp)
• Open the bitmap image in Irfanview, and save it as an icon file; call it favicon.ico. See the image below.
• Upload it to your webspace: It is best to put it at the root of your website (i.e., where you website's index page is.)
• For each page you want the favicon to be used, place the following code in the HEAD part of your HTML:
  <link rel="shortcut icon" href="/favicon.ico">

Further, you can use a different favicon for each website's section! Just put a favicon.ico file in your sections root directory and it should work. It would also help if you put the following code in the HEAD part of your HTML, replacing the MY_SECTION part with the correct section:

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

That's it!