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

A favicon is certainly that little image that a lot of browsers display on the handle line and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera expand the operation of favicons, adding them to their tabs. The label was coined predicated on Internet Explorer (the initial browser to support it) and derives from “Favorites Icon”. Each browser has a unique interface, and for that reason uses the favicon in different ways. The favicon allows a company to help expand promote its identity and photograph by displaying a logo, a graphical message, etc. Normally, the favicon reflects the look and feel of the web site or the organization’s logo.
A traditional favicon is truly a Microsoft Windows ICO data file. An ICO file is actually a repository of bitmap like pictures. They are used because in some locations a 16×16 pixel graphic is desired, and oftentimes a 32×32 image could be needed. Sometimes a 16 coloring image is desired, and sometimes a 256 coloring icon is desired.
You probably already knew all of the above.
But did you know that Firefox can show animated favicons? If you don’t trust me, open Firefox and go to my site, (there must be a link at the bottom of the article). unless you have Firefox, download it, it’s a “must have” and you will quickly fall in love with the simplicity and convenience of tabbed browsing. Even though you are not a designer but only a site owner, in today’s environment you absolutely got to know how your site looks in all browsers. You would believe all websites should look exactly the same, but as browsers are more diverse and much more sophisticated, standards aren’t respected and things will get messy. For example, I simply discovered that a few pages on my internet site don’t look as expected in the most recent version of Opera and must be adjusted.
Ok, I hope right now you noticed my animated favicon in Firefox and came back to the article to learn more about it…
The main reason why you can observe animated favicons in Firefox is basically because Firefox abolished the proprietary ICO format in favor of the opportunity to display any supported image data format in the favicon location, incorporating 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 – once you start designing among 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 on the image and chose “View Image” from the dialog. A blank webpage should display together with your chosen image and surprise: you can see a miniature 16×16 backup of the picture as a favicon! Uhh… perform I must mention again that people are doing all this in Firefox?
A hacker’s mind will immediately think about how great it might be to use this feature as a change tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t retail outlet FavIcons in .ico data files, the icons are stored within an encoded format directly in the bookmark file.
You can apply the same principle to animated GIFs and you will notice that a miniature version of the animation as well plays in the street address bar and on the tabs.
Perhaps one of the main reasons why you don’t note that many sites using animations is browser compatibility. Animated favicons are not treated at all by WEB BROWSER. A static image will not be extracted from the animation also. Alternatively, the default .htm icon (as defined in Windows’ filetypes) will undoubtedly be placed directly under one’s Favorites – once added, that is. The animations are not backed by Netscape, Opera, Konqueror, Safari; at least so it seems during this writing. The Firefox family seems to be the only real friend to animations, but as browsers evolve, broader help for animation will most likely come along (or, the idea will die).
So, why not take advantage of this *now* 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 your site, or to any other location.
3. You hardcode in your page the positioning where Firefox should search 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, an established professional design firm (such as Bsleek) should be able to make a nice animated favicon for you personally. Another choice – I don’t endorse it, as your goal ought to be to excel through unique content material and push your own image out there – is to find one of the numerous galleries online and often download a prepared made animated favicon or have a large animated GIF and resize it and/or edit it in one of the countless available tools. There are also sites offering online animated favicon creation from the standard image (have a look at, locate “FavIcon from pics”, they have a simple but neat scrolling text feature).
In case you are however a fellow do-it-yourselfer, in that case let’s elaborate and look 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 users have Gimp, an incredibly powerful and free graphics software that may easily handle animated GIF generation. What many people don’t know is that Gimp can be available for free for Home windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP release for the photoshop-inclined viewers (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.

You may also like