You’ve been seeing those assorted tiny icons in the address bar and your bookmarks for some time. Favicons are a way to add a unique touch to webpages. If you have a website or blog of your own, you may have wondered how to make them yourself. While there are icon editors available, you can create your own favicons in Photoshop CS3 using a freeware plugin which allows the image to be saved in the icon format.

Before opening Photoshop, download the plugin from Telegraphics at http://www.telegraphics.com.au. Click on ICO Format and then click on the link for either Windows or Mac. Once unzipped, copy the .8bi file to the Photoshop CS3 Plugins folder and then open Photoshop.

A favicon needs to be 16 by 16 pixels and 8 bit, or 256 colors. Trying to resize a larger image (that you own, have permission to use, or is from the public domain) may not work well due to the loss of quality, though it can be done. To help minimize this problem, you can scale the view of the image you want to use down to the right size, and then hit the Print Screen key on your keyboard. Paste the screenshot into a new image, and then crop it to the right size.

Your other choice is to create the icon by pixelling, or painting pixel by pixel. Use the zoom percentage in the lower left corner of your image to enlarge the view to where you can easily see what you are doing. Make basic shapes echoing your site’s colors, or a more complex drawing if you have experience pixelling. Zoom to the actual size occasionally while you’re working to see how it looks, and make adjustments as needed.

Once you are finished resizing an image or creating one from scratch, click on File and then click on Save. In the Save As menu, click on the Format drop-down and choose ICO (Windows Icon) (*.ICO). Name it the standard favicon, or choose a different name.

Now you are ready to add your favicon to your website or blog. In order for it to display properly, the following HTML coding needs to be added to each page (remove the spaces at the beginning and end)

< rel="”shortcut" href="”favicon.ico”" type="image/x-icon”">

If you named the icon something other than favicon, use the name you chose. If you are using XHTML for coding, remember to put the / before the last bracket or it will not validate.

Save the changes to the pages, and upload them along with your icon to your server. Test your pages and refresh if necessary. Once the favicon appears, you are done.

Adding a little something extra to your blog or site isn’t as hard as it may appear. With a little patience and the freeware plugin, you can make your own favicon.