How to Create a Favicon in Photoshop

Custom favicon

A favicon is the small 16-pixel icon that you see in your browser address bar next to a website url. A favicon can be customized and is an effective way of further branding your site. Here is a step-by-step guide to creating your own online imprint.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Computer
• Adobe Photoshop

1. Download the Windows Icon (ICO) Photoshop plug-in from the Telegraphics website. See the Resources section for a link. Follow the directions provided with the download and install the plug-in.

2. Go to “File” and click “New.” Create a canvas of 80 x 80 pixels.

3. On your canvas, create the image that you would like to use as your favicon.

4. Go to “Image” and select “Image Size.” Resize your image to 16 x 16 pixels. Click the “Re-sample Image” drop-down menu and select “Bicubic Sharper.”

5. Check that your image looks good after resizing. If not, go back and adjust the image design.

6. Go to “File” and click “Save as.” Choose the Windows Icon (ICO) for the format, and save the file as favicon.ico.

7. Upload the favicon to the root of your website.

Tips & Warnings

• Simple designs with strong color contrasts work best for favicons.

• Refresh your website or clear out your browser's cache to test out your new favicon.

Resources

• Telegraphics website