How to Make a Favicon - 6 Easy Steps

In the previous post, Ann mentioned creating a favicon for your website. A favicon (short for Favorite icon) is the very small icon that appears somewhere near the top left section of your browser window. It is a representation of your logo, business, or website.

Step 1: How to Create the Working File

Use Adobe Photoshop or any other image processing software that is capable of creating .gif files with clear backgrounds. When you have the software open, go ahead and create a new file that is 16 pixels wide by 16 pixels tall with a clear background. Use this graphic as a guide:

Step 2: Background Color

Create two layers and add a background color to the bottom layer. If you want the background to be square then fill in the 16 pixel x 16 pixel box with your background color. If you want the background to be a shape, create the shape within the box, and leave the remainder of the area clear.

Hint: Use colors that match your website / logo.

Step 3: Image

Since the favicon is small, your full logo may be unrecognizable, so, add a graphic that represents your logo, business, or website. Try using a portion of your logo or initials from your business name.

Step 4: Testing the File

When you have your graphic ready to go, test it by setting the size to actual pixels. Then, stand back and look at the image. Can you make out what it is? If yes, go ahead and create the gif file. If no, rework the image with less detail.

Step 5: Creating a Copy for Your Website

A favicon can be created as a .gif file with the file extension changed to .ico. In Adobe Photoshop, use File – Save for Web & Devices… Be sure to select GIF from the dropdown menu at the top right of the panel, then save the file and name it favicon.ico. Plugins are also available to help you create the file, however, creating a .gif file and changing the extension .ico is easy enough to do without a plugin.

Step 6: Adding the Favicon to Your Website

Transfer the favicon.ico file to the top director (folder) of your website. If you need help transferring files, contact your web developer or hosting company. You can also add the following coding to the head section of your web pages, however, most browsers know to look for a favicon.ico file in the top directory without this coding.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Note: As per usual, Internet Explorer is an exception to the rule. It will not find and display your favicon without you jumping through hoops first.

When your favicon has been launched, let us know!

Posted on February 6, 2013 | Permalink | Join email list