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:

<LINK REL="SHORTCUT ICON" HREF="favicon.ico">


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!

Rate this Tutorial

Rate this Tutorial:

Current Rating:

3.5 out of 53.84/ 5.00 with 51 votes.

Current Comments

17 comments so far (post your own)

Great tut! I always got the impression that you had to pay for this...

Posted by . on Tuesday, 05.25.04 @ 05:47am | #62

um... does this still apply in php pages, I put it into the header.php, but I can't see it

Posted by lilraven on Tuesday, 06.29.04 @ 06:15am | #93

Should work fine. This page is a php file and it works. Make sure to add the line of code in step 3 inside the <head> tags. If you still need help you can email me.

Posted by Brian Zimmer (http://www.zimmertech.com/)on Tuesday, 06.29.04 @ 09:14pm | #95

If you want to put it in php put this in code in under <?php

echo"<LINK REL=\"SHORTCUT ICON\" HREF=\"favicon.ico\">\n"/;

Thats all you can put that anywhere in your php and this work's best with Php-Nuke!

Posted by mystycs (http://cryptocity.net/~mystycs/)on Friday, 04.1.05 @ 12:08am | #432

A great tutorial. It worked!!! I've wanted to do this for ages. I just wish I had better artistic skills-my icon is just a star but looks a little odd!! :)

Posted by Michelle (http://www.amagickallife.co.uk)on Tuesday, 04.12.05 @ 12:22pm | #446

i can get the icon to display in the favorites menu, but how do you get it to showup in the address bar?

ps - awesome tutorial!

Posted by matt on Tuesday, 09.27.05 @ 11:42am | #693

I don't own or operate my own web site. I just want the sites in my favorites list to have different icons so they are distinguishable. I see that when I view the properties of a fevorite that there is an option to change icon. The only problem is, I can't add icons to choose from. I want to be able to add icons to choose from and I don't know how. Can anyone help me with this? Thanks and have a great day.

Posted by Amber on Tuesday, 05.16.06 @ 02:10pm | #1050

great

Posted by Andi on Tuesday, 08.8.06 @ 04:24pm | #2563

this is so cool

Posted by tom on Monday, 11.13.06 @ 03:34pm | #2660

I found this site and used it to make a favicon for my arcade. <a href="http://www.quickfavicon.com">Favicons</a>

Thay have two different generators and an animated Gif banner assembler.

Posted by Joe W (www.microjoes.com)on Saturday, 09.15.07 @ 05:04am | #3017

I found this site and used it to make a favicon for my arcade. <a href="http://www.quickfavicon.com">Favicons</a>

Thay have two different generators and an animated Gif banner assembler.

Posted by Joe W (www.microjoes.com)on Saturday, 09.15.07 @ 05:05am | #3018

this website sucks fuck you all

Posted by jack (jhgjhhg)on Wednesday, 09.19.07 @ 01:07pm | #3021

shit fuck and hell i hate you all this website sucks fuck fuck opps did i say that fuck you all this website sucks and go suck my dick too

Posted by 5445f (fdt5rdtrgtd)on Wednesday, 09.19.07 @ 01:09pm | #3022

Three weeks before I retaired, life become empty. Therefore I began to play games like a young man. This is the first time <a href=http://www.goldtao.fr>world of warcraft gold</a><a href=http://www.wowgoldbag.fr>Wow gold</a><a href=http://www.wowgoldbag.fr>world of warcraft gold</a><a href=http://www.wowgoldeu.fr>wow gold</a><a href=http://www.wowgoldeu.fr>world of warcraft gold</a><a href=http://www.realpoor.fr>wow gold</a><a href=http://www.realpoor.fr>world of warcraft gold</a>in my life, all things in game seems so fancy. I lost myself. It made me bethink my first lover, the same charming and the same hipped. The appearance of the game just like my first lover’s face and the beautiful scene I find on my way just like <a href=http://www.realpoor.de>wow gold</a><a href=http://www.realpoor.de>world of warcraft gold</a><a href=http://www.wowgoldbag.de>wow gold</a><a href=http://www.wowgoldbag.de>world of warcraft gold </a><a href=http://www.wowgoldeu.de>wow gold</a><a href=http://www.wowgoldeu.de>world of warcraft gold</a><a href=http://www.goldtao.de>wow gold</a><a href=http://www.goldtao.de>world of warcraft gold</a><a href=http://www.goldtao.fr>wow gold</a>I found her strongpoint during the process of our amativeness. Every thing in the game is attracting me day by day. It’s a stirring journey. I am enjoying!<a href=http://www.wowgoldbag.co.uk>wow gold</a><a href=http://www.wowgoldbag.co.uk>world of warcraft gold</a><a href=http://www.realpoor.co.uk>wow gold</a><a href=http://www.realpoor.co.uk>world of warcraft gold</a><a href=http://www.goldtao.co.uk>wow gold</a><a href=http://www.goldtao.co.uk>world of warcraft gold</a><a href=http://www.wowgoldeu.co.uk>wow gold</a><a href=http://www.wowgoldeu.co.uk>world of warcraft gold</a>

Posted by time on Sunday, 12.30.07 @ 12:40pm | #3135

Three weeks before I retaired, life become emptyworld of warcraft goldwow goldworld of warcraft goldwow goldworld of warcraft goldTherefore I began to play games like a young man. This is the first time in my life, wow goldworld of warcraft goldwow goldworld of warcraft goldwow goldworld of warcraft goldWow goldall things in game seems so fancy. I lost myself. It made me bethink my first lover, the same charming and the same hipped. The appearance of the game just like my first lover’s face and the beautiful scene I find on my way just like I found her strongpoint during the process of our amativenesswow goldworld of warcraft goldwow goldworld of warcraft goldwow goldworld of warcraft gold . Every thing in the game is attracting me day by day. It’s a stirring journey. I am enjoying!wow goldworld of warcraft goldwow goldworld of warcraft goldwow goldworld of warcraft gold

Posted by time on Sunday, 12.30.07 @ 12:40pm | #3136

11111111111
<a href="http://www.163.com">2222222222</a>

Posted by jeep1688 on Tuesday, 03.18.08 @ 05:45pm | #3248

11111111111
<a href="http://www.163.com">2222222222</a>

Posted by jeep1688 on Tuesday, 03.18.08 @ 05:46pm | #3249

Leave your comment:

Learn how to add this comment form to your site with our comment form tutorial!

Name:

Email:

URL:

Comments:
 
Guess the letters and numbers (passphrase riddle) -- -n- and not a "W", but ((??? - 4) - 8) = -9 and not a "W", but small 'U' +3 letters , 1 chars before N & small 'S' +2 letters - 'E' +1 letters & 1 chars before small K, → retype that here
Enter the correct letters and numbers from the image into the text box. This small test serves as access restriction against malicious bots. Simply reload the page if this graphic is too hard to read.
 

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.