RE: favicon

A major concern for Web designers is making sure that a particular work stands out from the crowd. A design element that has been ignored quite a bit lately is the favicon. Personally, I have come to use both the Bookmarks Toolbar and a Bookmarks Sidebar (using All-in-one Sidebar) quite a bit after a long time of not really keeping my bookmarks very organized or caring to do so. Now that I have established quite a collection, I’ve had to organize them into their respective categories and more often than not I’m searching for a particular bookmark in order to look something up or check for updates on a specific site.

Please Use a Favicon

When faced with a decent amount of data, I find it easier to recognize an image pattern significantly quicker than coming upon a word or phrase that I’m looking for. The major problem is, however, that a large amount of my bookmarks don’t have a unique favicon and simply blend in with the crowd using the default Firefox page icon. I then have to start searching the text for a link and it becomes a bit tedious.

Why it Bothers Me

One of the major reasons I’m bothered when a site doesn’t use a favicon is that I have come into the habit of having only icons displaying on the Firefox Bookmarks Toolbar. Having only the favicon display, and removing any text label allows you to add significantly more links to the toolbar and have them remain visible. If a site doesn’t have a favicon, real estate is needed to have a label for the generic icon in the toolbar. I suppose its just a pet peeve of mine, but I assume if it bothers me, it must bother other people. Does it? Or am I the only one that uses the Firefox Bookmarks Toolbar in this way?

How to Create a Favicon

Creating a favicon is a very simple thing to do, which gives all the more reason to implement one. It is as easy as downloading png2ico and running it on a 16×16 pixel PNG. Documentation is included and it is quite easy to use. There is also a GUI implementation (German) if you prefer, but using the command line utility is quite easy. You can also create your favicon online using a variety of resources such as the Favicon Generator. Feel free to ask for any help, I’d be more than happy to get you up and running.

When creating your favicon, I’ve found it best to actually get into pixel art mode and work while at ~1000% zoom. Shrinking your logo or a unique element of your design into a 16×16 square doesn’t always fare too well. Sometimes you have to edit a pixel here and there so that the image is still effective. Just be sure that the favicon can directly be associated with your site so your returning visitors will be comforted by seeing your icon in their bookmarks instead of something generic.

You can implement your newly saved favicon using the following code:

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

Supporting all Browsers

Naturally, Web browsers handle the presence of a favicon in different ways. For instance, more often than not your favicon isn’t even viewable in IE, which is disappointing in itself being that it still holds the majority of the browser market. The important thing to remember is that usually the favicon is saved when a user actually bookmarks your page. It usually doesn’t appear in the address bar, and we can all infer why. Another thing to keep in mind is the importance of actually converting to an icon file as opposed to including the favicon as a PNG. While Firefox and many of the other superior browsers do support PNGs and their transparent traits, IE does not, so always be sure to include the .ico file. If you would like to try and make the best of both worlds, you can use the following code to use the .ico file for IE, and take advantage of using a PNG elsewhere.

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

As a parting note, please keep in mind that you should leave your favicon with the filename of ‘favicon’. You may be tempted to give it a meaningful name, but there are circumstances in which the favicon will not display if a different filename is used.

Favicons and IE7

After being directed to a particular post on favicons and IE7, it seems as though there is a strong possiblity that IE7 won’t even support favicons. Being that the favicon was established by Microsoft in the first place, I would truly miss this feature if it is removed in the next version of IE. I’ll be sure to do some testing in IE7 as the next versions are released to determine if this feature will truly be left out.