DECEMBER14.NET | Not Born of the 4th of July

• Days
• Replays
• Ways
• Displays
• Essays
• Forays

Making a favicon

A favicon is a resource file used by web sites to customise a visitor’s experience of the site in their browser — albeit in a small way.

Exactly how this customisation manifests itself depends on the visitor’s browser, as different browsers have different support for favicons. For example:

• If you bookmark a site that has a favicon, the favicon may be displayed against the site name in the bookmark list. Internet Explorer for Windows does this.
• If your browser supports tabbed browsing, the favicon may be displayed on the tab. Mozilla does this.
• The favicon may be displayed in the browser’s address bar, to the left of the URL. Mozilla does this; Internet Explorer for Windows does this if the site has been bookmarked.

Only fairly recent browsers support favicons, and some don’t support them at all. Internet Explorer for Mac seems to fall into the latter category.

The DECEMBER14.NET favicon looks like this: . Now that you know what it should look like, you can check in your own browser where (or if) the favicon is displayed.

The favicon.ico file

To make a favicon, you need to build an icon resource file, and you must name it favicon.ico — no other name will do. A .ico file is actually a Windows format icon file (yes, even though a favicon may be served by a Unix web server, and displayed by a browser on a Mac!). It isn’t just a simple bitmap file; in fact, the file can store several bitmap images of different sizes and different numbers of colours. The program using the icon (most often a web browser, in the case of favicon.ico) searches the icon resource file for the most appropriate version for its needs, and displays it.

There are two steps to the process: designing the icon, and converting it to an icon resource file.

Designing the icon

You can use pretty much any graphics program you like to design your favicon. The only rider is that if you are a Windows user, for this method, your graphics program must be able to save files in PNG format. Most modern graphics software supports PNG. Mac users can save the file in any common bitmap format.

You are going to need two different-sized versions of the icon: one at 16 by 16 pixels, the other at 32 by 32 pixels. The smaller of these is the one that will be used most often, for display in the browser’s address bar, tabs or bookmark list. The larger might be used for other purposes, such as a desktop shortcut icon. You might find it easiest to design your icon at a larger size, and then reduce it in your graphics program to the two sizes needed — unless you are a skilled “pixel artist” and want to draw them separately, pixel by pixel, at the required sizes.

I strongly recommend that you follow these guidelines when executing your design:

1. Keep it simple. An elaborate design may look great on a full-screen canvas, but reduced to a 16 pixel square, fine detail will become indistinct — or simply disappear.
2. Use few, contrasting colours. Keep your design to fewer than 16 colours (a “4 bit” image). This will keep the size of your finished favicon.ico file small, saving download time. It also contributes to the “keep it simple” plan, especially if you use colours that contrast quite strongly: your icon will be sharper and clearer at the small, 16 pixel size.
3. Think about transparency. Saving in PNG format, for example, allows you to set the background colour to transparent, so you can make your favicon look like part of the address bar or browser tab, rather than appearing inside its own “box”. But this isn’t always completely effective; if you apply anti-aliasing to your image, speckles of the background colour will appear around the image, which might jar against the address bar or tabs. In any case, you might prefer to have a solid square of colour as your background: the choice is yours.

Let’s take my favicon as an example. I couldn’t dream up a small, clear picture that somehow conveyed DECEMBER14, so I turned to the site “logo”. The logo, such as it is, is really just a rendering of text. As I couldn’t possibly squeeze DECEMBER14.NET into a 16 pixel square, I chose to simplify it down to D14. My main blog page has black text set on a white background, with orange used for the logo text and title graphic. So I picked those three colours for my design, setting the text in the same Metroblack typeface as the logo text.

I tried a few design variations before making my final choice. For each attempt, I laid out the icon on a 64 pixel square. Then I reduced this to 32 by 32 pixels, then 16 by 16 pixels, and satisfied myself that it was still legible at the smallest size. See the illustrations below:

I saved the 32 by 32 and 16 by 16 versions in 4-bit (16-colour) PNG format as fav32.png and fav16.png respectively.

Converting to an icon file — Windows users

First of all, download a copy of Matthias Benkmann’s free PNG to ICO converter png2ico. Decompress this ZIP archive to a directory of your choice on your PC. (Need help decompressing archives? Note: this link opens in a new browser window.)

Now copy your two favicon graphics (you did save them in PNG format, didn’t you?) to the same directory where you saved png2ico.

The png2ico program executes at the command line, so to run it you have to open an MS-DOS (Command Prompt) window. Then, navigate to the directory where you saved the png2ico program and your favicon graphics files.

Now, at the command prompt, enter:

png2ico favicon.ico fav32.png fav16.png

where fav32.png and fav16.png are the names of your graphics files. You can use png2ico’s colors switch to limit the colour depth of your favicons, for example:

png2ico favicon.ico --colors 16 fav32.png fav16.png

will limit your favicon to 16 colours, which I recommend. (Permitted values are 2, 16 and 256; if you leave the switch out, then the program defaults to the 256-colour setting.)

After running the program, you will find that it has created your favicon.ico file in the same directory. Now you’re ready for installation.

Converting to an icon file — Mac users

First, the bad news: I’ve searched, but I can’t find a free program that will allow Mac users to make .ico files. But .ico is a Windows file format, after all, which probably explains the dearth of Mac programs that handle it.

If you are a Photoshop user, you can design your favicon in Photoshop, and generate favicon.ico using The Iconfactory’s IconBuilder Photoshop plug-in. At the time of writing, this costs US $69.00, but it has the advantage that you can create proper, multi-resource icon files. But it only works with Photoshop.

There is another, imperfect, but slightly cheaper solution that will allow you to create your favicon design in any graphics program you wish. It is imperfect in that it cannot produce a true multi-resource file; that is, it can’t make a file that stores icons in multiple sizes and colour depths. So you need to make just one favicon graphic, sized at 16 by 16 pixels since this is the size that is most needed.

The solution is to convert your graphic file, saved in pretty much any bitmap format you choose (though bear in mind what I said earlier about transparency, as permitted by PNG and GIF), and to convert it to .ico format using a shareware program, Graphic Converter from Lemke Software. This sells for US $30 to $35 at the time of writing.

So, open your 16 pixel square graphic in Graphic Converter. From the Picture menu, select Colors then 16 colors, just to make sure you save your file as a 4-bit colour graphic. Then, from the File menu, select Save As. The dialogue box that pops up has a drop-down list labelled Format; from this select Windows icon *.ico. Finally, save your file with the name favicon.ico. Now you’re ready for installation.

Installing your favicon

When browsers are looking for favicon files, they first of all search the same web directory as the HTML file currently being displayed. (Note that this gives you the possibility of creating different favicons for different parts of your site, if the different parts are kept in different directories.) If the browser doesn’t find a favicon file in the same directory, then it searches the root (top level) directory for the domain.

So, if we assume you will be using only one favicon for your whole site, then all you should need to do is upload your favicon.ico file to the root directory on your web server.

However, some browsers that are capable of displaying favicons won’t actually do so unless instructed by the web page. To satisfy these browsers, your web pages need to include one of the following lines of code between the <head> and </head> tags (so to cover all bases, you should include both):

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

Bear in mind that if your favicon file is not in the same directory as your HTML files, then you need to include the path as well as the file name in the href attribute. For example, if your HTML files are located at http://www.example.com/html/ but your favicon file is in the root directory, the the href attribute needs to be

href="http://www.example.com/favicon.ico"

or, more simply,

href="/favicon.ico"

Personally, I don’t bother with these additional lines of HTML — it works without them in recent versions of Internet Explorer, Netscape, Mozilla and others; and for the few where it doesn’t, well, it’s no big deal. I have enough cruft in the head of my pages already.

Troubleshooting

Even if you are using a browser that displays favicons, you might find after uploading yours that your browser doesn’t immediately show it. What do you do?

1. Remember that Internet Explorer will never show the favicon unless you have bookmarked the site (or added it to your Favourites list, in IE lingo). If your site is already bookmarked, delete the old bookmark, and bookmark it again. This might help with other browsers, too — I can’t speak for them all.
2. Try clearing your browser’s cache (your browser stores or “caches” pages and images that you have visited recently, to speed loading the next time you visit). You will usually find a way to do this under “Internet Options”, “Preferences”, “Tools”, or some similar menu item. First point your browser to a completely different site, then clear the cache, then return to your own site.

So far, I’ve always found that one or both of these actions does the trick. If not, you could try the “ultimate purge” (no laxatives required!):

1. Delete any current bookmarks to your site.
2. Point your browser to another web site, then clear the browser cache.
3. Shut down your browser completely.
4. Re-start your browser and point it at your site.
5. Bookmark your site if necessary (it will be for IE).

If that doesn’t do it, I don’t know what will. You might try entering the favicon URL directly into your browser to force it to download the file and place it in its cache.