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

A favicon is that little image that most browsers display on the tackle series and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera expand the operation of favicons, adding them with their tabs. The label was coined predicated on Internet Explorer (the initial browser to aid it) and derives from “Favorites Icon”. Each web browser has a unique user interface, and as a result uses the favicon in various ways. The favicon allows an organization to further promote its identity and photograph by displaying a logo design, a graphical message, etc. Normally, the favicon reflects the appearance and feel of the website or the organization’s logo.
A traditional favicon is actually a Microsoft Windows ICO document. An ICO file is truly a repository of bitmap like images. They are used because in a few locations a 16×16 pixel impression is desired, and often a 32×32 image could be needed. Sometimes a 16 shade image is desired, and quite often a 256 shade icon is desired.
You probably already knew all the above.
But did you know Firefox can display animated favicons? If you don’t believe me, open Firefox and go to my site, (there must be a link in the bottom of the article). unless you have Firefox, download it, it is a “must have” and you may quickly love 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 every browsers. You would believe that all websites should look the same, but as browsers are more diverse and much more sophisticated, standards are not respected and things will get messy. For example, I simply discovered that a few pages on my web site don’t look needlessly to say in the most recent version of Opera and must 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 observe animated favicons in Firefox is basically because Firefox abolished the proprietary ICO data 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 solution, the animated favicon is nothing but a tiny animated GIF.
Here is a very neat trick, that may actually be utilized to visualize how any photograph appears like as a 16×16 pixel icon – once 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 page with any graphic that you are interested in. Right click on the image and chose “View Picture” from the dialog. A blank web page should display with your chosen image and surprise: you can observe a miniature 16×16 duplicate of the picture as a favicon! Uhh… do 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 might be to use this feature as a change 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 will notice that a miniature edition of the animation in addition plays in the handle 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 aren’t treated at all by Internet Explorer. A static image will not be extracted from the animation sometimes. Rather, the default .htm icon (as defined in Windows’ filetypes) will be placed directly under one’s Favorites – once added, that’s. The animations are not reinforced by Netscape, Opera, Konqueror, Safari; at the very least so it seems during this writing. The Firefox relatives seems to be the only friend to animations, yet as browsers evolve, broader help for animation will most likely 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 create a 16×16 animated GIF.
2. You upload the animated GIF to the “root” of your 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 picture” wise.
Unless you feel too creative or just don’t possess time and/or patience, an established professional design firm (such as Bsleek) will be able to create a nice animated favicon for you. Another alternative – I don’t endorse it, as your goal ought to be to excel through unique articles and push your own image out there – would be to find one of the numerous galleries online and either download a ready made animated favicon or have a large animated GIF and resize it and/or edit it in one of the countless available tools. There also are sites offering online animated favicon creation from the standard image (check out, get “FavIcon from pics”, they have a simple but neat scrolling text feature).
Should you be however a fellow do-it-yourselfer, then simply let’s elaborate and appearance at some techniques and helpful tips:
As far as tools go: If you are a lucky operator of Adobe’s excellent Photoshop, then you also have a companion request called ImageReady. Linux customers have Gimp, a remarkably powerful and free graphics software that can easily handle animated GIF creation. What many people have no idea is that Gimp can be available for free for Windows and the Mac. There is also GIMPShop in the wild, which is a nifty GIMP edition for the photoshop-inclined visitors (did I mention free?). There are also many specialized GIF animation manufacturers, some freeware, some not.

Leave a Reply

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