Home
photolesa.com
The creative tutorial home of image wrangler, Lesa Snider.

Creating Favicons

March 16, 2005 by
Tags: 
Photoshop
Make your own web site icon using Photoshop or Elements

You know those cute little web site icons you see in your browser’s address bar? They’re called favicons (see example below) and they’re great for adding a bit-o-branding to your web site. Not only do they show up in browser address bars, they also appear in RSS news feed content aggregators, such as NetNewsWire and so forth. In this week’s tutorial, I’m going to show you how to create your very own favicon in Photoshop; though, first let’s talk a bit about the design and an extra plug-in you’re going to need.

First of all, don’t try to reduce your entire logo to favicon size. Final dimensions of this little bugger is going to be 16 pixels by 16 pixels and that’s it. I highly recommend surfing around the web to get an idea of what other folks are using as favicons to quickly get an idea of what works and what doesn’t (translated: what is recognizable and what is not). For example, I chose to use a slice of my logo rather than the whole thing. Remember, the goal is to brand your identity with something recognizable at a very small size.

Second, you’re going to need to download a plug-in which will allow Photoshop to save the file in Windows Icon (.ico) file format. There is free software (donation-ware, actually) that can be found at: http://www.telegraphics.com.au/sw - It’s a little plug-in called “icoformat” that you need to drag into the Adobe Photoshop CS > Plug-Ins > FileFormat folder (you may need to relaunch Photoshop for it to recognize the new plug-in).

Step 1: Make a blank slate upon which to work by selecting File > New to create a 64 x 64 pixel document as shown below (shortcut: Command N on a Mac or Control N on a PC).

It’s true that the end result of our efforts will be 16 x 16; though, unless you were blessed with microscopic vision, that’s a tough size to work with initially. You can achieve the same effect by starting out with a larger, perfectly square canvas and then sizing it down.

Step 2: Place your artwork in the new document. In my case, this meant opening a native Illustrator file (.ai) in Photoshop, playing with the art a little more (I experimented with some effects that didn’t work out), and clicking + dragging the layer on which my art lived into the new, blank 64 x 64 pixel document we created above.

Step 3: Resize the artwork to fit canvas if necessary. My artwork from Illustrator was a little big so I pressed Command T (or Control T on a PC) to invoke Free Transform. I held the Shift key down while dragging the bottom, right handle inward in order to preserve proper proportions. When I was happy with the size I pressed Return to accept the Transform.

Step 4: Size down the whole canvas. Select Image > Image Size and enter 16 pixels as shown below. Note: Make sure to check Constrain Proportions.

Step 5: You might experiment with Unsharp Mask at this point to see if it improves the clarity of your favicon or not. Else, we’re ready to save it and upload. Select File > Save As and from the Format menu, choose Windows Icon (ICO).

That’s it! You’re ready to upload the “favicon.ico” file to the root level of your web server (where the index page lives).

Please note that not all browsers support favicons (Internet Explorer is one of them), and you may need to empty the browser cache before you see the fruits of your labor. To this day, Safari proudly displays my favicon on every computer except my own. Who knows why. Arg.

Tip: Some browsers do benefit by having a link to the favicon, so if you want to go the extra step, you can insert the following code somewhere within the head section of each web page:

<link rel=”SHORTCUT ICON” href=”/favicon.ico”>

This can be time consuming, so you might use the Find and Replace command, which is in most any HTML editor, and search for a piece of code that appears in every page, such as the ending </title> tag. For example, you could do a Find on:

</title>

and Replace it with:

</title><link rel=”SHORTCUT ICON” href=”/favicon.ico”>
scoreless-slow
darkness