The Favicon, an Untapped Graphic Promotion Trick – Animated Favicons?
A favicon is definitely that little image that most browsers display on the deal with line and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera expand the operation of favicons, adding them to their tabs. The title was coined predicated on Internet Explorer (the first browser to aid it) and derives from “Favorites Icon”. Each browser has a unique interface, and for that reason uses the favicon in various ways. The favicon allows a company to further promote its identity and graphic by displaying a logo design, a graphical message, etc. Generally, 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 file. An ICO file is actually a repository of bitmap like images. They are used because in some locations a 16×16 pixel image is desired, and oftentimes a 32×32 image may be needed. Sometimes a 16 shade image is desired, and occasionally 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 head to my site, bsleek.com (there should be a link at the bottom of the article). unless you have Firefox, download it, it’s a “must have” and you will 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 got to know how your site looks in every browsers. You would believe that all websites should look exactly the same, but as browsers become more diverse and much more sophisticated, standards aren’t 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 ought to be adjusted.
Ok, I hope right now you found my animated favicon in Firefox and returned to the article to learn more about it…
The main reason why you can observe animated favicons in Firefox is because Firefox abolished the proprietary ICO structure 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 key, the animated favicon is only a tiny animated GIF.
Here’s a very neat trick, that may actually be used to visualize how any impression looks like as a 16×16 pixel icon – once you start designing one of those, you will realize that it is very hard to produce a legible image on a 16 square pixels canvas:
Find any page with any graphic you are interested in. Right click the image and chose “View Image” from the dialog. A blank page should display together with your chosen image and surprise: you can see a miniature 16×16 copy of the picture 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 of how great it might 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 the same principle to animated GIFs and you will notice that a miniature release of the animation as well plays in the tackle 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 either. Rather, the default .htm icon (as defined in Windows’ filetypes) will be placed under one’s Favorites – once added, that is. 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 relatives seems to be the only friend to animations, but 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 make 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 positioning where Firefox should search for the animation.
That’s really it, “big picture” wise.
If you don’t feel too creative or simply don’t possess time and/or patience, a reputable professional design firm (such as for example Bsleek) will be able to create a nice animated favicon for you personally. Another option – 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 numerous galleries online and frequently download a ready made animated favicon or take a large animated GIF and resize it and/or edit it in another of the countless available tools. There also are sites that offer online animated favicon creation from the standard image (check out chami.com, get “FavIcon from pics”, they will have a simple but neat scrolling text feature).
For anyone who is however a fellow do-it-yourselfer, next let’s elaborate and look at some techniques and useful tips:
As far as tools go: If you’re a lucky owner 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 can easily handle animated GIF creation. What many people have no idea is that Gimp is also available for free for Home windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP variation for the photoshop-inclined visitors (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.