View Full Version : Favorites Icon Tutorial

07-28-2006, 04:02 PM
Favorites Icon Specifications

1. The name must be named favicon.ico
2. The size must be 16 pixels X 16 pixels
3. It must be created as 24 bit color
4. It must be saved as an icon of course
5. It must be placed in the top level public folder.

How to create a favorites icon

1. Use an image editing program like Abobe Photoshop or JASC Paint Shop Pro to create your icon. Create a new image or use an image you found somewhere and resize it to 16 X 16 pixels. When you take a large picture and make it small it tends to get jagged edges and look crappy. So what you want to do is choose a smaller image to start with or choose an image with large simple objects so it will reduce more clearly. You can always just use your website initials with a border and background using your website colors. That would look nice and set you apart from other sites. Another tip look at it double size at 32 pixels because if someone creates a shortcut to you site on their desktop it will blow up the size of your icon to double size.
2. When you are creating or modifying an existing image make sure you save it as a 24 bit per pixel image or 24 bit color. You will have to read the help file for your image editing program for directions on how to do that with your specific program.
3. Then save it as an icon and name it favicon.ico.
4. Take the icon you made and upload it your public directory, the place you put all of your other pages. Don't put it in a folder put it in your top level public folder.
5. If you like you can put this line of code in between the head tags of your webpage. Or you don't have to the browser will automatically look for an icon. Here is the code if you choose to use it:

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico">
(Replace yoursite.com with your domain.)

6. That's all there is to it. If for some reason it doesn't work make sure the image is saved or created as a 24 bit color image , it is 16 pixels square, it is named favicon.ico and it is uploaded to the correct place. Try closing your browser and reopening it again.