How to convert a photo into an icon or favicon

by Klaus Graefensteiner 13. November 2007 08:59

This article explains to the "Absolute Photoshop Beginner" how to create a web site icon aka Favicon from a photo using Adobe Photoshop CS3 and the ICON file format provided by Telegraphics. The instructions are created on a Windows XP SP2 computer.

Step 1 - Download and Install Adobe Photoshop CS3:

Download and install a trial version of Photoshop CS3 from www.adobe.com/downloads/ . I picked the Photoshop CS 3 Extended edition.

Reboot the computer, if the install asks you to do so.

Step 2 - Download and Install the ICO File Format:

The goal is to create an Icon graphic in Photoshop and save it as *.ico file format. Photoshop doesn't provide this file format out of the box, but you can download it from this web site: http://www.telegraphics.com.au/sw/.

For Windows pick the appropriate link and push the download button. This will initiate a file download. Once the download is complete open the ICOFormat-1.6f9-win.zip file with Winzip.

Extract the ICOFormat.8bi file into the following folder: "C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats". This is the folder that holds the Photoshop file format extensions on English US Windows, if Photoshop has been installed using the default settings. This folder might be different depending on your platform and configuration.

Step 3 - Restart Adobe Photoshop CS3:

Step 4 - Open the JEPG file that needs to be converted:

My blog web site's theme has to do with tinkering. So I decided to take a picture of a tinker toy wheel. I am going to convert this picture into an icon file. First I open the JPEG file with Photoshop using the File->Open menu command.

Step 5 - Measure the size of your object with the Ruler tool:

The Ruler Tool can be started by the Analysis --> Ruler Tool menu command. Use the Ruler tool to measure size of object. I this case the object is about 1600 by 1600 pixels big. This measurement will be needed to configure the Crop Tool's crop ratio in the next step.

Step 6 - Crop a square containing your object:

Use crop tool and enter the dimensions of the area to be cropped. In this case it will be 1600 by 1600 pixels. The width and the height need to be the same value, because the target file output will be a square icon as well.

Then select the area to be cropped and execute the crop action by selecting the right mouse click menu "Crop".

This will be the resulting image after the crop action.

Step 7 - Cut out the actual object and remove the background:

Now use the Quick Selection tool to remove the area around the object. In this case it seems to be easier to select the area around the object and then use the "Select Inverse" command.

Use the Right Mouse Click command "Layer Via Copy" to create a new Layer that shows the selected object. Then hide the Background layer. You can do this by clicking on the "Eye" button next to the Background layer in the Layers panel in the bottom right of your workspace.

Step 8 - Make Image Adjustments as necessary:

Select Layer 1 and select the menu command Image --> Adjustments --> Brightness/Contrast… to adjust Brightness and Contrast. Apply other adjustments as needed.

Step 9 - Save work as Photoshop PSD file:

Invoke the File --> Save As.. Menu command to save your workspace as IconFromPhoto.PSD.

Step 10 - Reduce photo to icon size:

Now we are ready to convert this photo into an icon. First we need to reduce the image size. Remember, a Favicon is only 16 by 16 pixels big. To reduce the image size you must execute the Image --> Image Size menu command. Set the image size to 16 by 16 pixels and choose the "Bicubic Sharper" reduction algorithm.