Favicons—demystified

One of the few things you only come across once in a while is creating a favicon. It only needs to be done once, doesn’t need any ongoing maintenance or debugging. Do it once, done. That’s the reason, at least in my case, that every time I get to the task “Create a favicon for the page”, I try to remember how exactly they need to be created and what to pay attention to. So this is another “remember for next time” article.

There are three ways to generate a favicon:

  • Photoshop (or any other graphics editing program)
  • Online tools
  • On the fly

Photoshop

I say Photoshop here, because that is what I am used to, but essentially you could use any graphics editing program out there. Essentially, when you have your graphic ready, you could just simply save it as a PNG or GIF. Well, you can do that, but that won’t work in Internet Explorer.

To make your favicon display in every browser, you need to create an ICO file. To do that with Photoshop, you can install a plugin that helps you do so.

Installing the plugin

First you need to download the plugin from Telegraphics for whichever version of Photoshop you are using. Extract the ZIP file and move the plugin file into the “File Formats” folder inside your Photoshop Plugins folder:

  • On Windows, ICOFormat.8bi (the path should be similar to: C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats\)
  • On OS X/Classic, icoformat (CS2/Mac version is ICOFormat_cs2.plugin)

After you have done that quit and relaunch Photoshop, if it’s already running. To check if the plugin is installed correctly, go to Help > About Plug-ins. In this list, the ICO plugin should appear.

Saving your graphic in ICO format

There are some constraints as to which images are eligible to be saved in ICO format:

  • The ICO format does not allow images more than 255 pixels high or wide.
  • Only Bitmap, Grey Scale, Indexed and RGB mode images, no more than 8 bits per channel, can be saved as ICO.

If the graphic you created meets those requirements, you can go to “Save” or “Save As…” and select “ICO (Windows Icon) *.ICO” from the list of available file formats. The size of the final image should either be 16×16 or 32×32 pixels, larger images would just need to be scaled down by the browser.

Online tools

Following is a list of tools on the web that make it even easier to create favicons. In principle, you can upload an image file that you already have to the service, which will create a favicon file from that image.

On the fly

Using the data URI scheme, it is possible to include data items, such as an image, inline on a webpage, without actually referencing it as an external resource. The format for that URI scheme is:

data:[<MIME-type>][;base64],<data>

The W3C Validator for example makes use of this. If your markup validation fails, the red square displayed in the address bar is referenced as:

<link rel="icon" href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%02%00%00%00%90%91h6%00%00%00%19IDAT(%91c%BCd%AB%C2%40%0A%60%22I%F5%A8%86Q%0DCJ%03%00%DE%B5%01S%07%88%8FG%00%00%00%00IEND%AEB%60%82" type="image/png" />

In the example from the W3C Validator, the data for the favicon is represented using ASCII encoding, but could also be encoded as base64, which would then look like this in the HTML source:

<link rel="icon" href="data:image/png;base64,/9j/4AAQ..." type="image/png" />

Referencing it in HTML

When you have your favicon file, place it somewhere on your webspace of your site (it does not have to be the root directory) and then reference the file in HTML (in the head of the document) like so:

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

If you now go to your site and refresh the browser, you should see your icon showing up in the address bar.

Page 1 of 2 | Next page