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

A favicon can be that little image that most browsers display on the tackle brand and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera expand the features of favicons, adding them with their tabs. The label was coined based 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 various ways. The favicon allows a company to further promote its identity and picture by displaying a logo, a graphical message, etc. Often, the favicon reflects the appearance and feel of the website or the organization’s logo.
A traditional favicon is actually a Microsoft Windows ICO record. An ICO file is actually a repository of bitmap like photos. They are used because in a few locations a 16×16 pixel impression is desired, and occasionally a 32×32 image could be needed. Sometimes a 16 colour image is desired, and sometimes a 256 colour icon is desired.
You probably already knew each of the above.
But did you know Firefox can display animated favicons? If you don’t believe me, open Firefox and head to my site, (there should be a link in 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 convenience of tabbed browsing. Even if you aren’t a designer but only a site owner, in the current environment you absolutely must know how your site looks in all browsers. You would think that all websites should look exactly the same, but as browsers are more diverse and more sophisticated, standards are not respected and things can get messy. For example, I simply discovered that several pages on my web site don’t look as expected in the latest version of Opera and should 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 because Firefox abolished the proprietary ICO structure in favor of the opportunity to display any supported image file format in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big secret, the animated favicon is nothing but a tiny animated GIF.
Here’s a very neat trick, that may actually be utilized to visualize how any impression looks like as a 16×16 pixel icon – once you start designing among those, you will realize that it is very 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 Photo” from the dialog. A blank page should display together with your chosen image and surprise: you can view a miniature 16×16 duplicate of the graphic 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 conversion tool. Unfortunately, unlike Internet Explorer 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 the same principle to animated GIFs and you may notice that a miniature variant of the animation likewise plays in the target bar and on the tabs.
Perhaps one of the main reasons why you don’t note that many sites using animations is browser compatibility. Animated favicons are not 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 under one’s Favorites – once added, that is. The animations are not reinforced by Netscape, Opera, Konqueror, Safari; at least so it seems at the time of this writing. The Firefox family seems to be the only friend to animations, yet as browsers evolve, broader support for animation will most likely come along (or, the concept will die).
So, why not take advantage of this *right 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 positioning where Firefox should search for the animation.
That’s really it, “big image” wise.
Unless you feel too creative or simply don’t have time and/or patience, a reputable professional design firm (such as Bsleek) will be able to create a nice animated favicon for you personally. Another choice – I don’t endorse it, as your goal should be to excel through unique content material and push your personal image out there – would be to find one of the numerous galleries online and frequently download a prepared 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 a standard image (have a look at, discover “FavIcon from pics”, they will have a straightforward 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 valuable tips:
As far as tools go: If you are a lucky proprietor of Adobe’s excellent Photoshop, you then also have a companion request called ImageReady. Linux consumers have Gimp, an incredibly powerful and free graphics program that may easily handle animated GIF development. What many people don’t know is that Gimp is also available for free for House windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP edition for the photoshop-inclined audience (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.

You may also like