Favorites Icons Tutorial - Create your own Custom Icon

Click here for Spanish Translation favorites icons tutorial

Want favorites icons for your site? With this tutorial, you can learn how to make your own favorites icon to give your site that professional image you want. And with this simple tutorial, you can have it on your site in less than 30 minutes! How about that!

What are Favorites Icons, and why do I need them?

Favorites Icons are the icons that are placed next to the bookmark in Internet Explorer favorites list. An advantage of favorites icons is that they stand out, and seperate your site from the hundreds of others in the favorites folder.

Step 1: Create the Icon Image

There are 2 ways to do this, the easy way and the hard way. The hard way just offers more control.

The Easy Way: Go here and follow the instructions to create your .ico file. If you do this, you can skip step 2

The hard way: You first need to create the icon. There are plenty of programs to do this, but I am going to use Paint Shop Pro 8. You can use any program though, as long as you can save as a .gif. I will have instructions for any graphics program, but you can skip a step by downloading a icon creator, such as Favicon.com . If you decide to go with this option, please skip to the HTML step. Here are the requirements for the image.

Size: 16 pixels by 16 pixels
Number of Colors: 16
Image Type: .gif
File Size: 1046 bytes

You have two options for the graphic. Either design with 16 colors to start with, or design with all the colors then lower the number of colors at the end. Because PSP has a great .gif export utility, I am going to change the colors at the end. I suggest doing it at the end.

In PSP 8, after you have created the icon, go to File | Export | GIF Optimizer. Click on the "Colors" tab, then check "Optimized Median Cut", and at the top next to "How many colors do you want", enter 16. If you enter more than this, the file will be too large.

Step 2: Change to Icon to a .ico File:

Now you need to change the .gif to a .ico file. If you used an icon creator, you can skip this step. I use IrfanView . To change the file type in irfanview, load the image, then go to File | Save As, and at the bottom choose .ico. Name the file favicon.ico. Now all you need to do is add it to your pages.

Step 3: Add the favorites icon to pages

Open up the HTML page you want to add this to in a text editor. Notepad will work. Find the <Head> tag, then enter the following code:

Step 4: Upload Pages

You should be done now. Upload the pages and icon to your server, and you are done. If you don't have a FTP client, try FileZilla , it's my favorite. Good Luck! If you have any questions, ask in the form. You can now create your own favorites icons!