Blog

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

A favicon is definitely that little image that a lot of browsers display on the street address range and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera prolong the efficiency of favicons, adding them to their tabs. The title was coined based on Internet Explorer (the first browser to aid it) and derives from “Favorites Icon”. Each web browser has a unique interface, and for that reason uses the favicon in different ways. The favicon allows an organization to further promote its identity and graphic by displaying a company logo, a graphical message, etc. Frequently, the favicon reflects the look and feel of the web page or the organization’s logo.
A traditional favicon is truly a Microsoft Windows ICO record. An ICO file is actually a repository of bitmap like photos. They are used because in some locations a 16×16 pixel image is desired, and quite often 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 of the above.
อนิเมะ
But did you know that Firefox can show animated favicons? If you don’t believe me, open Firefox and go to my site, bsleek.com (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 though you aren’t a designer but only a site owner, in the current environment you absolutely got to know how your site looks in all browsers. You would believe all websites should look exactly the same, but as browsers become more diverse and much more sophisticated, standards are not respected and things can get messy. For example, I just discovered that a few pages on my webpage don’t look needlessly to say in the latest version of Opera and need to be adjusted.
Ok, I hope by now you found my animated favicon in Firefox and returned to the article to learn more about it…
The main reason why you can view animated favicons in Firefox is because Firefox abolished the proprietary ICO format in favor of the opportunity to display any supported image formatting in the favicon location, incorporating 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 may actually be utilized to visualize how any impression looks like as a 16×16 pixel icon – as soon as 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 site with any graphic that you will be interested in. Right click the image and chose “View Photo” from the dialog. A blank page should display with your chosen image and surprise: you can observe a miniature 16×16 duplicate of the graphic as a favicon! Uhh… perform 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 transformation tool. Unfortunately, unlike Internet Explorer and Opera, Firefox doesn’t retail outlet FavIcons in .ico data, the icons are stored within an encoded format immediately in the bookmark file.
You can apply the same principle to animated GIFs and you may notice that a miniature type of the animation also plays in the address bar and on the tabs.
Perhaps one of the main reasons why you don’t note that many sites using animations can be browser compatibility. Animated favicons aren’t treated at all by Internet Explorer. A static image will not be extracted from the animation either. 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 reinforced by Netscape, Opera, Konqueror, Safari; at least so it seems at the time of this writing. The Firefox friends and family seems to be the only real friend to animations, however as browsers evolve, broader support for animation will probably come along (or, the idea will die).
So, why not take advantage of this *today* 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 location.
3. You hardcode in your page the location 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 make 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 personal image out there – would be to find one of the numerous galleries online and possibly download a all set made animated favicon or have a large animated GIF and resize it and/or edit it in another of the countless available tools. There also are sites offering online animated favicon creation from the standard image (check out chami.com, find “FavIcon from pics”, they have a simple but neat scrolling text feature).
Should you be however a fellow do-it-yourselfer, then let’s elaborate and look at some techniques and useful tips:

As far as tools go: If you’re a lucky manager of Adobe’s excellent Photoshop, then you also have a companion program called ImageReady. Linux users have Gimp, a remarkably powerful and free graphics program that may easily handle animated GIF creation. What many people have no idea is that Gimp can be available for free for House windows and the Mac. Addititionally there is GIMPShop in the wild, which is a nifty GIMP version for the photoshop-inclined market (did I mention free?). Additionally, there are many specialized GIF animation makers, some freeware, some not.