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

A favicon is usually that little image that a lot of browsers display on the handle range and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera prolong the features of favicons, adding them to their tabs. The name was coined based on Internet Explorer (the first browser to support it) and derives from “Favorites Icon”. Each browser has a unique interface, and as a result uses the favicon in different ways. The favicon allows a company to further promote its identity and picture by displaying a logo design, a graphical message, etc. Typically, the favicon reflects the appearance and feel of the website 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 images. They are used because in a few locations a 16×16 pixel picture is desired, and in some cases a 32×32 image may be needed. Sometimes a 16 colour image is desired, and in some cases a 256 color icon is desired.
You probably already knew all the above.
But did you know Firefox can exhibit animated favicons? Unless you believe me, open Firefox and go 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 may quickly love the simplicity and capability of tabbed browsing. Even though you are not a designer but just a site owner, in today’s 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 are more diverse and much more sophisticated, standards are not respected and things can get messy. For example, I just discovered that several pages on my web page don’t look needlessly to say in the latest version of Opera and ought to be adjusted.
Ok, I hope right now you found my animated favicon in Firefox and came back to the article for more information 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 formatting in the favicon location, like 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’s a very neat trick, that may actually be used to visualize how any graphic looks 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 Image” from the dialog. A blank site should display with your chosen image and surprise: you can see a miniature 16×16 backup of the image as a favicon! Uhh… carry out I have to mention again that we are doing all of this in Firefox?
A hacker’s mind will immediately think about how great it would be to use this feature as a transformation tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t shop FavIcons in .ico documents, the icons are stored within an encoded format immediately in the bookmark file.
You can apply exactly the same principle to animated GIFs and you may notice that a miniature variant of the animation furthermore plays in the street address 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 Internet Explorer. A static image will never be extracted from the animation also. Rather, the default .htm icon (as defined in Windows’ filetypes) will undoubtedly be placed under one’s Favorites – once added, that is. The animations are not supported by Netscape, Opera, Konqueror, Safari; at least so it seems at the time of this writing. The Firefox spouse and children seems to be the only friend to animations, but as browsers evolve, broader support for animation will most likely come along (or, the concept will die).
So, why not benefit from this *today* 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 location where Firefox should look for the animation.
That’s really it, “big photo” wise.
If you don’t feel too creative or just don’t possess time and/or patience, a reputable professional design firm (such as Bsleek) will 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 content material and push your personal image out there – is to find one of the many galleries online and sometimes 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 offering online animated favicon creation from the standard image (check out, discover “FavIcon from pics”, they have a straightforward 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 useful tips:
As far as tools go: If you’re a lucky operator of Adobe’s excellent Photoshop, you then also have a companion software called ImageReady. Linux users have Gimp, a remarkably powerful and free graphics software that can easily handle animated GIF design. What many people have no idea is that Gimp can be available for free for Windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP version for the photoshop-inclined audience (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.

Jordan Gilbert

Back to top