A favicon can be that little image that a lot of browsers display on the address collection and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera lengthen the functionality of favicons, adding them with their tabs. The label was coined predicated on Internet Explorer (the first browser to support it) and derives from “Favorites Icon”. Each browser has a unique interface, and for that reason uses the favicon in different ways. The favicon allows an organization to help expand promote its identity and impression by displaying a company logo, a graphical message, etc. Normally, the favicon reflects the appearance and feel of the web site or the organization’s logo.
A traditional favicon is actually 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 photograph is desired, and oftentimes a 32×32 image could be needed. Sometimes a 16 colour image is desired, and oftentimes a 256 shade icon is desired.
You probably already knew all the above.
But did you know that Firefox can screen 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). unless you have Firefox, download it, it’s 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 the current environment you absolutely must know how your site looks in every browsers. You would believe all websites should look exactly 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 internet site don’t look as expected in the most recent version of Opera and have to be adjusted.
Ok, I hope right now you found my animated favicon in Firefox and came back to the article for more information about it…
The main reason why you can observe animated favicons in Firefox is basically because Firefox abolished the proprietary ICO structure in favor of the opportunity to display any supported image formatting in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you understand the big technique, the animated favicon is only a tiny animated GIF.
Here’s a very neat trick, that can actually be used 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 site with any graphic you are interested in. Right click the image and chose “View Image” from the dialog. A blank page should display with your chosen image and surprise: you can see a miniature 16×16 duplicate of the image as a favicon! Uhh… perform 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 would be to use this feature as a change tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t retail store FavIcons in .ico files, 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 may notice that a miniature edition of the animation in addition plays in the target bar and on the tabs.
Perhaps one of many reasons why you don’t see that many sites using animations is definitely browser compatibility. Animated favicons are not treated at all by WEB BROWSER. A static image will never be extracted from the animation frequently. Instead, the default .htm icon (as defined in Windows’ filetypes) will undoubtedly be placed under one’s Favorites – once added, that’s. The animations are not reinforced by Netscape, Opera, Konqueror, Safari; at least so it seems during this writing. The Firefox spouse and children seems to be the only friend to animations, but as browsers evolve, broader assistance for animation will most likely come along (or, the idea will die).
So, why not take advantage of this *now* 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 location.
3. You hardcode in your page the location where Firefox should look for the animation.
That’s really it, “big picture” wise.
If you don’t feel too creative or just 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 content and push your own image out there – would be to find one of the many galleries online and either 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 that offer online animated favicon creation from the standard image (have a look at chami.com, locate “FavIcon from pics”, they 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 helpful tips:
As far as tools go: If you’re a lucky operator of Adobe’s excellent Photoshop, then you also have a companion software called ImageReady. Linux consumers have Gimp, a remarkably powerful and free graphics use that can easily handle animated GIF generation. 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 release for the photoshop-inclined market (did I mention free?). Additionally, there are many specialized GIF animation makers, some freeware, some not.