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

A favicon will be that little image that most browsers display on the address range and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera expand the efficiency of favicons, adding them with their tabs. The name was coined based on Internet Explorer (the first browser to support it) and derives from “Favorites Icon”. Each web browser has a unique interface, and as a result 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 appearance 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 truly a repository of bitmap like photos. They are used because in a few locations a 16×16 pixel photo is desired, and sometimes a 32×32 image could be needed. Sometimes a 16 coloring image is desired, and quite 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 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 may quickly fall in love with the simplicity and capability of tabbed browsing. Even if 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 think that all websites should look the same, but as browsers become more diverse and much more sophisticated, standards aren’t respected and things will get messy. For example, I just discovered that several pages on my webpage don’t look needlessly to say in the latest version of Opera and must be adjusted.
Ok, I hope by now you saw my animated favicon in Firefox and returned to the article for more information about it…
The main reason why you can observe animated favicons in Firefox is because Firefox abolished the proprietary ICO format in favor of the opportunity to display any supported image file format in the favicon location, incorporating BMP, JPG, GIF, PNG and… animated GIFs.
So now you understand the big key, the animated favicon is nothing but a tiny animated GIF.
Here’s 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 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 that you will be interested in. Right click the image and chose “View Graphic” from the dialog. A blank site should display with your chosen image and surprise: you can observe a miniature 16×16 backup of the picture as a favicon! Uhh… do I must mention again that we are doing all this in Firefox?
A hacker’s mind will immediately think about how great it might be to utilize this feature as a transformation tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t 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 variant of the animation also 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 can be browser compatibility. Animated favicons aren’t treated at all by WEB BROWSER. A static image will not be extracted from the animation often. 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 the very least so it seems during this writing. The Firefox relatives seems to be the only real friend to animations, however as browsers evolve, broader assistance for animation will most likely come along (or, the concept will die).
So, why not benefit from 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 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, an established professional design firm (such as Bsleek) will 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 articles and push your personal image out there – would be to find one of the numerous galleries online and possibly download a ready made animated favicon or take a large animated GIF and resize it and/or edit it in one of the many available tools. There are also sites that offer 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).
For anyone who is however a fellow do-it-yourselfer, after that let’s elaborate and look at some techniques and beneficial tips:
As far as tools go: If you’re a lucky manager of Adobe’s excellent Photoshop, you then also have a companion use called ImageReady. Linux customers have Gimp, an incredibly powerful and free graphics application that may easily handle animated GIF design. What many people don’t know is that Gimp can be available for free for House windows and the Mac. There is also GIMPShop in the wild, which is a nifty GIMP type for the photoshop-inclined viewers (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.

Leave a comment

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