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

A favicon is definitely that little image that most browsers display on the handle series and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera extend the functionality of favicons, adding them with their tabs. The brand was coined based on Internet Explorer (the initial browser to aid it) and derives from “Favorites Icon”. Each browser has a unique user interface, and as a result uses the favicon in various ways. The favicon allows an organization to help expand promote its identity and photograph by displaying a company logo, a graphical message, etc. Generally, the favicon reflects the appearance and feel of the web page or the organization’s logo.
A traditional favicon is truly a Microsoft Windows ICO file. An ICO file is truly a repository of bitmap like pictures. They are used because in a few locations a 16×16 pixel photo is desired, and occasionally a 32×32 image may be needed. Sometimes a 16 shade image is desired, and occasionally a 256 colour icon is desired.
You probably already knew each of the above.
But did you know Firefox can show animated favicons? If you don’t trust me, open Firefox and go to my site, (there should be a link in the bottom of the article). if you don’t have Firefox, download it, it is a “must have” and you will quickly fall in love with the simplicity and capability of tabbed browsing. Even though you are not a designer but only a site owner, in the current 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 are not respected and things can get messy. For example, I just discovered that a few pages on my web page don’t look needlessly to say in the latest 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 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, including BMP, JPG, GIF, PNG and… animated GIFs.
So now you understand the big magic formula, 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 impression appears like as a 16×16 pixel icon – once you start designing one of those, you will realize that it is very hard to make a legible image on a 16 square pixels canvas:
Find any web page with any graphic you are interested in. Right click on the image and chose “View Graphic” from the dialog. A blank web page should display together with your chosen image and surprise: you can observe a miniature 16×16 copy of the impression as a favicon! Uhh… carry out I have to mention again that people are doing all this in Firefox?
A hacker’s mind will immediately think about how great it will be to use this feature as a transformation tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t retail store FavIcons in .ico documents, 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 edition of the animation as well plays in the handle bar and on the tabs.
Perhaps one of the main reasons why you don’t note that many sites using animations is usually browser compatibility. Animated favicons aren’t treated at all by Internet Explorer. A static image will not be extracted from the animation also. As an alternative, the default .htm icon (as defined in Windows’ filetypes) will be placed directly under one’s Favorites – once added, that is. The animations are not reinforced by Netscape, Opera, Konqueror, Safari; at the very least so it seems during this writing. The Firefox friends and family seems to be the only real friend to animations, but as browsers evolve, broader assistance for animation will probably come along (or, the idea will die).
So, why not benefit from this *right now* and ‘beat the rush’?
Basically, this is one way it’s done:
1. You create 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 look for the animation.
That’s really it, “big image” wise.
Unless you feel too creative or simply don’t have time and/or patience, an established professional design firm (such as for example Bsleek) will be able to make a nice animated favicon for you. Another option – I don’t endorse it, as your goal should be to excel through unique content material and push your own image out there – would be to find one of the numerous galleries online and sometimes download a ready made animated favicon or take 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 a standard image (check out, locate “FavIcon from pics”, they have a straightforward but neat scrolling text feature).
Should you be however a fellow do-it-yourselfer, then simply let’s elaborate and appearance at some techniques and valuable tips:
So far as tools go: If you are a lucky owner of Adobe’s excellent Photoshop, then you also have a companion request called ImageReady. Linux users have Gimp, a remarkably powerful and free graphics application that may easily handle animated GIF design. What many people have no idea is that Gimp is also available for free for Home windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP variation for the photoshop-inclined visitors (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.