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

A favicon is usually that little image that a lot of browsers display on the handle brand and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera prolong 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 different ways. The favicon allows an organization to help expand promote its identity and photo by displaying a logo design, a graphical message, etc. Typically, 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 file. 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 could be needed. Sometimes a 16 colour image is desired, and in some cases a 256 colour icon is desired.
You probably already knew all the above.
But did you know that Firefox can display animated favicons? If you don’t trust me, open Firefox and head to my site, (there must 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 convenience of tabbed browsing. Even though you aren’t a designer but just a site owner, in the current environment you absolutely got to know how your site looks in every browsers. You would believe all websites should look the same, but as browsers become more diverse and more sophisticated, standards aren’t respected and things will get messy. For example, I simply discovered that a few pages on my web site don’t look needlessly to say in the most recent version of Opera and need to be adjusted.
Ok, I hope right now you found 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 formatting 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 photo appears like as a 16×16 pixel icon – as soon as you start designing one of those, you will realize that it is very hard to produce a legible image on a 16 square pixels canvas:
Find any site with any graphic that you will be interested in. Right click on the image and chose “View Graphic” from the dialog. A blank page should display with your chosen image and surprise: you can see a miniature 16×16 copy of the graphic as a favicon! Uhh… carry out I must mention again that people are doing all this in Firefox?
A hacker’s mind will immediately think of how great it will be to use this feature as a change 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 exactly the same principle to animated GIFs and you will notice that a miniature type 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 will be browser compatibility. Animated favicons are not treated at all by Internet Explorer. A static image will never be extracted from the animation also. Instead, the default .htm icon (as defined in Windows’ filetypes) will be placed directly under one’s Favorites – once added, that’s. The animations are not supported by Netscape, Opera, Konqueror, Safari; at least so it seems at the time of this writing. The Firefox family seems to be the only real friend to animations, yet as browsers evolve, broader assistance for animation will probably come along (or, the concept will die).
So, why not take advantage of this *nowadays* 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 location.
3. You hardcode in your page the location 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 for example Bsleek) should 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 content material and push your own image out there – is to find one of the numerous galleries online and frequently download a ready made animated favicon or take a large animated GIF and resize it and/or edit it in another of the countless available tools. There are also sites that offer online animated favicon creation from the standard image (check out, locate “FavIcon from pics”, they have a simple but neat scrolling text feature).
In case you are however a fellow do-it-yourselfer, subsequently let’s elaborate and appearance at some techniques and helpful tips:
So far as tools go: If you’re a lucky owner of Adobe’s excellent Photoshop, then you also have a companion software called ImageReady. Linux consumers have Gimp, a remarkably powerful and free graphics request that may easily handle animated GIF development. What many people have no idea is that Gimp is also available for free for Windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP variant for the photoshop-inclined audience (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.