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

A favicon is certainly that little image that most browsers display on the tackle line and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera expand the operation of favicons, adding them with their tabs. The name was coined predicated on Internet Explorer (the first browser to aid it) and derives from “Favorites Icon”. Each browser has a unique user interface, and for that reason uses the favicon in different ways. The favicon allows an organization to help expand promote its identity and photograph by displaying a logo, 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 document. An ICO file is actually a repository of bitmap like pictures. They are used because in some locations a 16×16 pixel picture is desired, and oftentimes a 32×32 image could be needed. Sometimes a 16 coloring image is desired, and quite often a 256 coloring icon is desired.
You probably already knew all the above.
But did you know that Firefox can display animated favicons? Unless you believe me, open Firefox and go to my site, (there should be a link at the bottom of the article). if you don’t have Firefox, download it, it is a “must have” and you may quickly fall in love with the simplicity and capability of tabbed browsing. Even though you are not a designer but just a site owner, in the current environment you absolutely must 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 simply discovered that several pages on my webpage don’t look as expected in the latest version of Opera and have to be adjusted.
Ok, I hope right now you noticed my animated favicon in Firefox and returned to the article to learn more about it…
The main reason why you can see animated favicons in Firefox is basically because Firefox abolished the proprietary ICO formatting in favor of the ability to display any supported image structure 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’s a very neat trick, that can actually be utilized to visualize how any photograph looks like as a 16×16 pixel icon – as soon as 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 web page with any graphic you are interested in. Right click on the image and chose “View Photograph” from the dialog. A blank site should display together with your chosen image and surprise: you can view a miniature 16×16 backup of the photo as a favicon! Uhh… do I have to mention again that people are doing all of this in Firefox?
A hacker’s mind will immediately think about how great it will be to utilize this feature as a alteration tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t retail outlet 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 variation of the animation also plays in the target bar and on the tabs.
Perhaps one of many reasons why you don’t see that many sites using animations will be browser compatibility. Animated favicons aren’t treated at all by WEB BROWSER. A static image will never 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 at the time of this writing. The Firefox household seems to be the only real friend to animations, however as browsers evolve, broader assistance for animation will probably come along (or, the idea will die).
So, why not benefit from this *nowadays* and ‘beat the rush’?
Basically, this is how 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 look for the animation.
That’s really it, “big photo” wise.
Unless you feel too creative or just don’t have time and/or patience, a reputable professional design firm (such as Bsleek) should be able to create a nice animated favicon for you. Another option – I don’t endorse it, as your goal ought to be to excel through unique information and push your own image out there – would be to find one of the numerous galleries online and frequently download a all set made animated favicon or have a large animated GIF and resize it and/or edit it in one of the many available tools. There also are sites that offer online animated favicon creation from a standard image (have a look at, find “FavIcon from pics”, they will have a simple but neat scrolling text feature).
When you are however a fellow do-it-yourselfer, subsequently let’s elaborate and look at some techniques and valuable tips:
As far as tools go: If you’re a lucky user of Adobe’s excellent Photoshop, then you also have a companion request called ImageReady. Linux consumers have Gimp, a remarkably powerful and free graphics software that can easily handle animated GIF development. 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, that is a nifty GIMP variation for the photoshop-inclined market (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.