The Favicon, an Untapped Image Promotion Trick – Animated Favicons?

A favicon is that little image that a lot of browsers display on the target brand and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera expand the features of favicons, adding them to their tabs. The brand was coined based on Internet Explorer (the initial browser to aid it) and derives from “Favorites Icon”. Each web browser has a unique interface, and as a result uses the favicon in various ways. The favicon allows a company to further promote its identity and graphic by displaying a logo, a graphical message, etc. Usually, the favicon reflects the look and feel of the web page or the organization’s logo.


A traditional favicon is actually a Microsoft Windows ICO record. An ICO file is actually a repository of bitmap like photos. They are used because in a few locations a 16×16 pixel photograph is desired, and quite often a 32×32 image may be needed. Sometimes a 16 coloring image is desired, and oftentimes a 256 coloring icon is desired.

You probably already knew all the above.

But did you know that Firefox can exhibit animated favicons? Unless you believe me, open Firefox and head to my site, bsleek.com (there must be a link at the bottom of the article). unless you have Firefox, download it, it is a “must have” and you will quickly love the simplicity and capability of tabbed browsing. Even if you aren’t a designer but just a site owner, in today’s environment you absolutely got to know how your site looks in every browsers. You would believe that all websites should look the same, but as browsers become more diverse and more sophisticated, standards aren’t respected and things can get messy. For example, I just discovered that several pages on my web page don’t look needlessly to say in the most recent version of Opera and must be adjusted.

Ok, I hope by now you observed my animated favicon in Firefox and came back to the article for more information about it…

The main reason why you can observe animated favicons in Firefox is basically because Firefox abolished the proprietary ICO file format in favor of the opportunity to display any supported image data format in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.

So now you understand the big secret, the animated favicon is nothing but a tiny animated GIF.

Here is a very neat trick, that can actually be used to visualize how any graphic appears like as a 16×16 pixel icon – as soon as you start designing one of those, you will realize that it is extremely hard to produce a legible image on a 16 square pixels canvas:

Find any webpage with any graphic that you will be interested in. Right click the image and chose “View Impression” from the dialog. A blank webpage should display with your chosen image and surprise: you can observe a miniature 16×16 backup of the photo as a favicon! Uhh… do I must mention again that we are doing all of this in Firefox?

A hacker’s mind will immediately think of how great it will be to use this feature as a transformation tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t retail outlet FavIcons in .ico files, the icons are stored in an encoded format straight in the bookmark file.

You can apply exactly the same principle to animated GIFs and you will notice that a miniature type of the animation furthermore plays in the target bar and on the tabs.

Perhaps one of many reasons why you don’t see that many sites using animations is certainly browser compatibility. Animated favicons aren’t treated at all by WEB BROWSER. A static image will never be extracted from the animation either. Rather, the default .htm icon (as defined in Windows’ filetypes) will be placed under one’s Favorites – once added, that’s. The animations are not backed by Netscape, Opera, Konqueror, Safari; at least so it seems during this writing. The Firefox family members seems to be the only friend to animations, yet as browsers evolve, broader support for animation will most likely come along (or, the concept will die).

So, why not take advantage of this *now* and ‘beat the rush’?

Basically, this is one way it’s done:

1. You make a 16×16 animated GIF.

2. You upload the animated GIF to the “root” of one’s site, or to any other location.

3. You hardcode in your page the location where Firefox should search for the animation.

That’s really it, “big picture” wise.

Unless you feel too creative or just don’t have time and/or patience, a reputable professional design firm (such as Bsleek) should be able to create a nice animated favicon for you personally. Another choice – I don’t endorse it, as your goal should be to excel through unique content and push your own image out there – would be to find one of the many galleries online and sometimes download a ready made animated favicon or have a large animated GIF and resize it and/or edit it in one of the countless available tools. There also are sites offering online animated favicon creation from the standard image (check out chami.com, discover “FavIcon from pics”, they will have a straightforward but neat scrolling text feature).

For anyone who is however a fellow do-it-yourselfer, in that case let’s elaborate and appearance at some techniques and beneficial tips:

So far as tools go: If you’re a lucky proprietor of Adobe’s excellent Photoshop, then you also have a companion use called ImageReady. Linux consumers have Gimp, an incredibly powerful and free graphics application that may easily handle animated GIF design. What many people don’t know is that Gimp is also available for free for Windows and the Mac. Addititionally there is GIMPShop in the wild, that is a nifty GIMP release for the photoshop-inclined crowd (did I mention free?). Additionally, there are many specialized GIF animation makers, some freeware, some not.