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
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.
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:
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" />
<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.
On a sidenote: if you ever wanted to play Defender displayed in a 16×16 pixels favicon, you can do so now. Not necessarily useful for everyday websites, but a great demo of what can be done with favicons.
- How to Add a Favicon to your Site – QA @ W3C
- Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
- Creating favicons with Adobe Photoshop and GoLive