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

A favicon is certainly that little image that a lot of browsers display on the street address brand and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera expand the features of favicons, adding them with their tabs. The name 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 for that reason uses the favicon in different ways. The favicon allows a company to further promote its identity and photograph by displaying a emblem, a graphical message, etc. Generally, the favicon reflects the appearance and feel of the web page 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 some locations a 16×16 pixel image is desired, and often a 32×32 image could be needed. Sometimes a 16 color image is desired, and quite often a 256 shade icon is desired.
You probably already knew each of the above.
But did you know that Firefox can show animated favicons? If you don’t trust 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’s a “must have” and you may quickly fall in love with the simplicity and capability of tabbed browsing. Even though you aren’t a designer but just a site owner, in today’s environment you absolutely must know how your site looks in all 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 simply discovered that a few pages on my webpage don’t look needlessly to say in the most recent version of Opera and need to be adjusted.
Ok, I hope by now you observed my animated favicon in Firefox and came back 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 data format in favor of the opportunity to display any supported image format in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big key, the animated favicon is nothing but a tiny animated GIF.
Here’s a very neat trick, that can actually be used 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 make a legible image on a 16 square pixels canvas:
Find any webpage with any graphic that you will be interested in. Right click on the image and chose “View Picture” from the dialog. A blank webpage should display together with your chosen image and surprise: you can see a miniature 16×16 copy of the photograph as a favicon! Uhh… do I must mention again that people are doing all of this in Firefox?
A hacker’s mind will immediately think of how great it will be to utilize this feature as a alteration tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t store FavIcons in .ico data, the icons are stored in an encoded format immediately 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 likewise plays in the deal with bar and on the tabs.
Perhaps one of many reasons why you don’t note that many sites using animations is browser compatibility. Animated favicons aren’t treated at all by Internet Explorer. A static image will not be extracted from the animation possibly. Rather, the default .htm icon (as defined in Windows’ filetypes) will be placed directly under one’s Favorites – once added, that is. The animations are not backed by Netscape, Opera, Konqueror, Safari; at least so it seems during this writing. The Firefox relatives seems to be the only 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 *now* and ‘beat the rush’?
Basically, this is one way 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 other location.
3. You hardcode in your page the location where Firefox should search for the animation.
That’s really it, “big photo” wise.
Unless you feel too creative or simply don’t have time and/or patience, an established professional design firm (such as for example Bsleek) should be able to make a nice animated favicon for you. Another alternative – I don’t endorse it, as your goal should be to excel through unique articles and push your own image out there – would be to find one of the many galleries online and sometimes download a prepared 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 (check out, get “FavIcon from pics”, they have a straightforward but neat scrolling text feature).
When you are however a fellow do-it-yourselfer, in that case let’s elaborate and look at some techniques and valuable tips:
As far as tools go: If you are a lucky operator of Adobe’s excellent Photoshop, then you also have a companion program called ImageReady. Linux consumers have Gimp, an incredibly powerful and free graphics request that may easily handle animated GIF generation. 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 crowd (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.