Friday, December 01, 2006

Create a favicon.ico with Photoshop

Ever noticed that the little icon next to the URL in your address bar? For some websites the icon is customized and for others it is either blank or a default icon. That icon is actually pulled from a file on your webserver called favicon.ico. The favicon.ico file tells the browser what 16x16 pixel icon to display when people browse to your website. The icon will also appear to the left of your favorite entry for any website with a favicon.ico.

So how do you get your own icon for your website? You need to create a file named favicon.ico and upload it to the main directory of your websierver. Sounds easy enough, right? Well almost, the only thing that makes this tricky is this very tiny image file is in a format most image editors can not save as a default. This little devious file is a Windows Icon Format file (.ico) which should spread dread into the hearts of MAC users everywhere. No fear, though, with a little plugin you can use good old Adobe Photoshop to create your very own favicon.ico file.

First, go to: this website and download the ICO format plugin for your version of Photoshop (MAC and PC are different). Next, follow the included instructions to drop the ICO plugin into your Photoshop plugins folder. Now the fun part, get your self a 16x16 pixel canvas and design your favicon.ico. A little hint is to use a canvas of 32x32 and then change the image size right before you save so you can actually see what you are doing! Now, choose save as and select Windows Icon Format (ico) from the format dropdown box. Last upload your file to the home directory of your webserver.

The first thing I know you are going to do is go to your website to see your nifty new website icon! Sadly, though, there is a good chance you will not see it :( Browsers are iffy on when they check for the new versions of favicon.ico. Some check when you refresh, some you have to clear the cache, some you have to bookmark the page, others you have to jump on one foot while left clicking! Anyways, just give it some time and sometime your new image will pop up on your address bar.


Post a Comment

<< Home