Photoshop CS5: The Missing Manual

Designing a Website Favicon

You know those tiny little icons on the left edge of your web browser's address bar (see Figure 17-8).They're called favicons (short for "favorites icons"), and they're great for adding a bit o' branding to your web pages. They not only show up in your web browser, they also appear in news feeds (clickable headlines from your favorite websites that you can access through special newsreader software or your favorite browser). Creating them in Photoshop is a snap, and you'll be designing them like a pro after you read this section.

First, spend some quality time looking at other sites' favicons. Your goal is to brand your website with a graphic that's exactly 16 pixels x 16 pixels—no more, no less. It's tough to design anything recognizable that small, but it can be done. For example, you might use a portion of your logo rather than the whole thing or your company's initials rather than the full name.

Figure 17-8. Here's an example of four different favicons for various websites (the top one is circled). Designing favicons is a good way to test your design skills since you're limited to 16 pixels square!

Next, you need to download a plug-in that lets Photoshop save the file in the Windows Icon (ICO) file format. You can download a free plug-in called ICO Format from www.telegraphics.com.au/sw/. Just quit Photoshop and follow the instructions on Adding and Removing ...