Favicon Creation for Fun and Profit

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:

  1. Unzip the download package
  2. 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.
  3. Pat yourself on the back; you just installed a plugin
Drop the whole folder in your Plugins folder

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.

Give yourself plenty of room when you design your favicon

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:

Reduce the File Size to 16 x 16

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.

Save it as favicon.ico

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.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>