How to create a Favicon Icon (.ICO) in Photoshop

Wondering How to Add Favicon Support to Photoshop?

First of all - what is a favicon? A favicon (also referred to as a website, url, shortcut, or bookmark icon) is the little icon that shows up to the left of the page URL you are viewing in your browser's address bar, as well as in the corner of the current browser tab, or browser window, of the web page you are viewing. If you have multiple tabs open, it serves as a handy visual queue to help you quickly recognize the identity of a web page. While there's all sorts of favicon creating software out there, if you own a copy of Photoshop there's a free plugin that will let you create favicon's quickly and easily.

Specifications of the Favicon Icon (.ico file)

A favicon is a square graphic (16 x 16 pixels, although you may want to start with 64 x 64 to give your design more freedom) and ends in the .ico extension. The favicon was initially introduced in an earlier version of Internet Explorer, and only supported the .ico format.

Today, most modern browsers, with the exception of Internet Explorer (which continues to dominate, by a steadily shrinking margin, the browser market), support other graphical formats for the favicon, in addition to .ico (PNG, GIF (including animated GIF's)), and Firefox and Opera also support JPG and PNG.

However, until Internet Explorer supports formats outside of .ICO, you'll probably want to stick with this format. Which is why the Photoshop .ICO favicon plugin comes in handy.

Download the Photoshop Favicon Plugin

First you'll want to head on over to our friends at Telegraphics and download the Photoshop favicon plugin. Since a bit of work went into creating this plugin, it's much appreciated if you can spare a small ($5) donation, especially if you end up making heavy use of this application. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Once you've download the plugin (ICOFormat64.8bi), place it in Photoshop's plugin directory (\Adobe Photoshop\Plug-Ins\) inside a directory called "Favicon" or another name of your choosing.

Creating Your Favicon (.ICO) File in Photoshop

Next, load up Photoshop, and create your favicon file. While you'll want to end up with a 16x16 pixel square, you might want to start with 32x32 or 64x64 so you have more room to work with. Then make sure your resized 16x16 still looks good. When you resample the image, select Bicubic Sharper (Photoshop CS) to prevent the image from blurring as it gets sized down.

As a general guideline, you'll want to create a favicon that reflects the identity of your website. This can be done by creating a small icon of your logo, or part of your website or company name, and by using your website's color scheme. You'll want the favicon to stick in people's heads as a little reminder of who you are.

When you're done, browse to File -> "Save As..." -> and under the "format" selection below the file name field, you should see a new .ICO (favicon) format selection (if you don't see it, make sure you downloaded the version of the plugin corresponding with your O/S and Photoshop versions (ie. Windows, Vista, MAC, 64-bit (CS 4)), etc. Save your file with the name "favicon.ico", and then link it in your web page as follows.

Adding the Favicon Icon to your Web Page

Once you've got your favicon.ico saved and ready to go, you can add it to your website as follows. In the header of each web page, you'll want to add the following code:

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

Note that this approach uses a root relative path (the forward slash at the beginning indicates the path is relative to your document root). If you can't get this to work, you might want to try using an absolute path:

<link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />

We discourage you from using a relative path (href="favicon.ico") because it can result in lost paths when you move your website, and is also more susceptible to link theft.

Uploading the Favicon to your Web Server

Once you've added the URL to your favicon file to your web page, you'll want to make sure the favicon.ico actually resides where you specified it (in the example above, in your document root (the root folder of your website - ie. /public_html or /www on Linux servers)).

Seeing the Favicon in Action

Once you've done that, restart your web browser, and you should see your favicon - both to the left of the URL address bar, and in the top left corner of the web page tab you're visiting.