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

A favicon is usually that little image that a lot of browsers display on the address range and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera expand the functionality of favicons, adding them to their tabs. The title was coined based 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 an organization to further promote its identity and picture by displaying a logo design, a graphical message, etc. Frequently, the favicon reflects the look and feel of the web site or the organization’s logo.
A traditional favicon is actually a Microsoft Windows ICO data file. An ICO file is truly a repository of bitmap like images. They are used because in a few locations a 16×16 pixel photograph is desired, and often a 32×32 image could be needed. Sometimes a 16 colour image is desired, and often a 256 color icon is desired.
You probably already knew each of the above.
But did you know Firefox can exhibit animated favicons? If you don’t believe me, open Firefox and head to my site, (there must be a link in the bottom of the article). if you don’t have Firefox, download it, it’s a “must have” and you will quickly love the simplicity and convenience of tabbed browsing. Even though you aren’t 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 believe that all websites should look the same, but as browsers are more diverse and more sophisticated, standards are not respected and things can get messy. For example, I simply discovered that several pages on my web page don’t look needlessly to say in the most recent version of Opera and have to be adjusted.
Ok, I hope by now you saw 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 data format in favor of the ability to display any supported image format in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big top secret, the animated favicon is only a tiny animated GIF.
Here is a very neat trick, that can actually be utilized to visualize how any graphic looks like as a 16×16 pixel icon – once you start designing among those, you will realize that it is very 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 the image and chose “View Photograph” from the dialog. A blank page should display with your chosen image and surprise: you can see a miniature 16×16 duplicate of the image as a favicon! Uhh… do I have to mention again that people are doing all this in Firefox?
A hacker’s mind will immediately think of how great it will be to utilize this feature as a conversion tool. Unfortunately, unlike Internet Explorer and Opera, Firefox doesn’t retail store FavIcons in .ico files, the icons are stored in an encoded format directly in the bookmark file.
You can apply the same principle to animated GIFs and you may notice that a miniature variation of the animation likewise plays in the deal with bar and on the tabs.
Perhaps one of the main reasons why you don’t see that many sites using animations is certainly browser compatibility. Animated favicons are not treated at all by WEB BROWSER. A static image will not be extracted from the animation sometimes. Alternatively, the default .htm icon (as defined in Windows’ filetypes) will be placed under one’s Favorites – once added, that’s. The animations are not supported by Netscape, Opera, Konqueror, Safari; at the very least so it seems during this writing. The Firefox spouse and children seems to be the only friend to animations, however as browsers evolve, broader support for animation will probably 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 create 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 search for the animation.
That’s really it, “big image” wise.
Unless you feel too creative or simply don’t possess time and/or patience, an established professional design firm (such as for example Bsleek) will be able to create a nice animated favicon for you personally. Another alternative – I don’t endorse it, as your goal ought to be to excel through unique information and push your own image out there – is to find one of the numerous galleries online and possibly download a all set made animated favicon or take a large animated GIF and resize it and/or edit it in one of the many available tools. There also are sites offering online animated favicon creation from the standard image (have a look at, find “FavIcon from pics”, they will have a simple but neat scrolling text feature).
If you are however a fellow do-it-yourselfer, next let’s elaborate and appearance at some techniques and beneficial tips:
As far as tools go: If you’re a lucky user of Adobe’s excellent Photoshop, then you also have a companion program called ImageReady. Linux users have Gimp, an incredibly powerful and free graphics software that may easily handle animated GIF creation. 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 variant for the photoshop-inclined viewers (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.

Leave a comment

Your email address will not be published. Required fields are marked *