Creating favicons with Adobe Photoshop and GoLive
Do you want to learn how to create custom web site icons like the ones above? Due to recent developments in the web browser market, more and more web designers want to create these custom favorites icons called "favicons." Adobe GoLive and Photoshop make it easy to create and manage these custom icons that are used in the address bar and bookmarks of many new web browsers.
What do you need?
- Adobe Photoshop <http://www.adobe.com/products/photoshop/main.html> or Photoshop Elements <http://www.adobe.com/products/photoshopel/main.html> to create the graphic for the icon.
- Windows Icon (ICO) file format Photoshop plugin to export the special file format. Download this donationware from Telegraphics <http://www.telegraphics.com.au/sw/> and install the plugin with the included instructions before starting this tutorial.
- Adobe GoLive <http://www.adobe.com/products/golive/main.html> to manage and upload the icon.
What are the steps?
Step 1: Creating the Photoshop Canvas
The final dimensions of the icon will be 16x16 pixels but working with such a small canvas is pretty tedious. Instead, work at an even multiple of 16 such as 64x64 so that when you resize your artwork to 16x16 pixels the interpolated image will be as clear as possible.
Select File>New... and create a new canvas that is 64x64 pixels. The dialog box should look like the one below.
Step 2: Designing the Icon
Design the icon in Photoshop and keep in mind that the final artwork will be reduced to a tiny 16x16 pixel image. The normal rules of good logo design apply so don't rely on elements such as fine details, smooth gradients, or small type.
Step 3: Sizing the Icon
When you think the design is ready, save a copy of the 64x64 pixel file and then select Image>Image Size... to scale the image to 16x16 pixels as seen in Figure 3. If you don't like the icon design at the smaller size just undo the Image Size command, change the design, and redo Step 3 until you're satisfied.
Step 4: Saving the Icon
When you're happy with the icon at 16x16 pixels select File>Save As... to use the Windows Icon (ICO) file format Photoshop plugin you downloaded from Telegraphics. Name the file favicon.ico, choose Windows Icon (ICO) from the Format pulldown menu, and save the file in a convenient place. You've created the file and now you need to add it to your web site with the following steps.
Step 5: Uploading the Icon
Now add the favicon.ico file to the root folder (top level) of your GoLive Site window as seen below and upload it to your web server.
Step 6 (optional): Linking to favicon.ico File
Different web browsers support favicons differently and some browsers benefit from a direct link in the HTML source code to the favicon.ico file. You could add this link by hand in each page but that's so tedious that I recommend using Edit>Find... instead. If you're not familiar with Find and Replace or concerned you might make a mistake, you should make a backup of your site before completing this step.
The end result of this find and replace will be adding this code to the head section of every page in the site:
Step 7: Testing Your Work
After you've completed steps 1-6 you can test your work in a web browser that supports the favicon feature such as:
Be aware that some browsers such as Microsoft IE 5.x for Macintosh still do not support the favicon feature and even the browsers that do support it handle it differently. For example, Microsoft IE 6.x for Windows will not show the favicon in the address bar until that URL has been added to the favorites and Apple Safari will not show an updated favicon until the browser cache has been cleared. As usual, test and test again!