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

A favicon is definitely that little image that most browsers display on the tackle line and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera lengthen the functionality of favicons, adding them with their tabs. The name was coined predicated on Internet Explorer (the initial browser to support it) and derives from “Favorites Icon”. Each web browser has a unique user interface, and for that reason uses the favicon in different ways. The favicon allows a company to further promote its identity and impression by displaying a logo design, a graphical message, etc. Frequently, the favicon reflects the look and feel of the website 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 pictures. They are used because in some locations a 16×16 pixel photograph is desired, and sometimes a 32×32 image could be needed. Sometimes a 16 shade image is desired, and often a 256 colour icon is desired.
You probably already knew all of the above.
But did you know Firefox can screen animated favicons? Unless you believe me, open Firefox and go to my site, (there should be a link in 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 though you are not a designer but just a site owner, in today’s environment you absolutely got to know how your site looks in all browsers. You would think that all websites should look the same, but as browsers become more diverse and more sophisticated, standards are not respected and things can get messy. For example, I just discovered that several pages on my web site don’t look needlessly to say in the most recent version of Opera and should be adjusted.
Ok, I hope by now you saw my animated favicon in Firefox and returned to the article to learn more about it…
The main reason why you can observe animated favicons in Firefox is because Firefox abolished the proprietary ICO format in favor of the opportunity to display any supported image formatting in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big secret, the animated favicon is nothing but a tiny animated GIF.
Here is a very neat trick, that can actually be utilized to visualize how any picture looks 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 make a legible image on a 16 square pixels canvas:
Find any page with any graphic that you are interested in. Right click on the image and chose “View Photo” from the dialog. A blank page should display with your chosen image and surprise: you can see a miniature 16×16 copy of the photograph as a favicon! Uhh… do I have to mention again that we are doing all of this in Firefox?
A hacker’s mind will immediately think of how great it could be to utilize this feature as a change tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t shop FavIcons in .ico data, the icons are stored within 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 as well plays in the tackle bar and on the tabs.
Perhaps one of many reasons why you don’t note that many sites using animations is definitely browser compatibility. Animated favicons are not treated at all by Internet Explorer. A static image will not be extracted from the animation possibly. Rather, the default .htm icon (as defined in Windows’ filetypes) will undoubtedly be placed directly under one’s Favorites – once added, that’s. The animations are not reinforced by Netscape, Opera, Konqueror, Safari; at the very least so it seems at the time of this writing. The Firefox family seems to be the only friend to animations, however as browsers evolve, broader assistance for animation will most likely come along (or, the concept will die).
So, why not benefit from this *today* and ‘beat the rush’?
Basically, this is how 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 location.
3. You hardcode in your page the positioning where Firefox should look for the animation.
That’s really it, “big image” wise.
If you don’t feel too creative or just don’t possess time and/or patience, a reputable professional design firm (such as Bsleek) should be able to make a nice animated favicon for you. Another choice – I don’t endorse it, as your goal ought to be to excel through unique content and push your personal image out there – is to find one of the numerous galleries online and often download a ready made animated favicon or have a large animated GIF and resize it and/or edit it in another of the many available tools. There also are sites offering online animated favicon creation from the standard image (check out, find “FavIcon from pics”, they will have a simple but neat scrolling text feature).
In case you are however a fellow do-it-yourselfer, then simply let’s elaborate and look at some techniques and helpful tips:
As far as tools go: If you’re a lucky user of Adobe’s excellent Photoshop, you then also have a companion use called ImageReady. Linux consumers have Gimp, a remarkably powerful and free graphics application that can easily handle animated GIF design. What many people don’t know is that Gimp can be available for free for Windows and the Mac. There is also GIMPShop in the wild, which is a nifty GIMP variant for the photoshop-inclined crowd (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.

Related Posts