Have you ever wondered how you can customize that little icon that shows for your website in the address bar and bookmarks? Wonder no more. This is called a Favicon (favicon.ico technically), and creating one is pretty simple.
Download the Favicon Plugin for Photoshop
Telegraphics makes a nice Photoshop plugin for saving .ico files in Photoshop. Not only does it work well and without a lot of fuss, it’s also completely free, although a $5.00 donation is encouraged if you like the plugin. You can download it here. If you’re using the 64 bit version of Photoshop, make sure you download that version of the plugin
To install the plugin:
- Unzip the download package
- Move the contents to the ‘Plugins’ directory of your Photoshop install. For Windows users this will be something like: C:\Program Files\Adobe\Adobe Photoshop XYZ\Plugins; if you’re using Vista or Windows 7 and have the 32 bit version of Photoshop installed, look in your Program Files (x86) folder instead.
- Pat yourself on the back; you just installed a plugin
And for those of us who don’t have Photoshop, there are ways to get Photoshop plugins to work on The Gimp (a powerful free image editing program).
Design the Favicon
Your Favicon will eventually be 16×16, but it’s awfully hard to work in those dimensions, so create a new file that’s a little bigger (but still divisible down to 16×16), let’s say 64×64.
Layout your icon to your liking (here’s a nice gallery of designs to help inspire you), and then re-size it down to 16×16. This is a pretty small area, so you may find that your design a little lacking once it’s been sized down.
If that happens, just hit Control-Z to undo, and simplify your design a little bit before trying again. It might take a couple of tries before you get something that works, so be patient. For instance, in this example I had to change the background color and increase the line weight before it looked good sized down to 16×16.
Once you’re happy with the design, resize it down to 16×16. To do so, simply go to Image > Image Size and drop the dimension:
Now it’s time to save it. Go to File > Save As. Name your icon “favicon.ico” and select “Windows Icon (ICO)” from the Format dropdown menu.
Putting the Favicon on Your Website
Upload the favicon to the root of your website (the same place as your home page in most cases). Make sure it’s not in an images folder.
Most browsers will check for the file and make it work, but you should also tell them where to find the file on each page just to be sure. Insert the following code into the <HEAD> section of your site:
<link rel=”shortcut icon” href=”/favicon.ico”>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
Now load the page and take a look. You may need to clear the browser cache before the icon displays, and older versions of IE won’t display it until you’ve added it as a favorite.
Using Other File Formats
Technically you can use other file formats for your favicon, such as PNGs for transparency, or GIFs for animation. However, these aren’t supported in all browsers, so test thoroughly before deploying one.