A favicon is usually that little image that most browsers display on the deal with range and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera expand the features of favicons, adding them to their tabs. The brand 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 a company to further promote its identity and impression by displaying a logo design, a graphical message, etc. Typically, the favicon reflects the look and feel of the website or the organization’s logo.
A traditional favicon is actually a Microsoft Windows ICO file. An ICO file is truly a repository of bitmap like pictures. They are used because in a few locations a 16×16 pixel graphic is desired, and occasionally a 32×32 image could be needed. Sometimes a 16 shade image is desired, and sometimes a 256 shade icon is desired.
You probably already knew all the above.
But did you know that Firefox can display animated favicons? If you don’t believe me, open Firefox and go to my site, bsleek.com (there must be a link at the bottom of the article). if you don’t 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 if you are not a designer but just a site owner, in the current environment you absolutely must know how your site looks in every browsers. You would think that all websites should look the same, but as browsers are more diverse and more sophisticated, standards aren’t respected and things will get messy. For example, I simply discovered that a few pages on my site don’t look needlessly to say in the most recent 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 view 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, incorporating BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big technique, the animated favicon is only a tiny animated GIF.
Here is a very neat trick, that may actually be utilized to visualize how any graphic looks like as a 16×16 pixel icon – as soon as you start designing among those, you will realize that it is very hard to make 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 webpage should display together with your chosen image and surprise: you can observe a miniature 16×16 copy of the picture as a favicon! Uhh… carry out I have to mention again that people 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 WEB BROWSER and Opera, Firefox doesn’t retail outlet FavIcons in .ico data files, the icons are stored in an encoded format straight in the bookmark file.
You can apply the same principle to animated GIFs and you will notice that a miniature type of the animation likewise 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 usually browser compatibility. Animated favicons aren’t treated at all by WEB BROWSER. A static image will not be extracted from the animation also. Instead, 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 during this writing. The Firefox household seems to be the only real friend to animations, yet as browsers evolve, broader assistance for animation will probably come along (or, the concept will die).
So, why not benefit from this *today* 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 one’s site, or to any other location.
3. You hardcode in your page the location where Firefox should search for the animation.
That’s really it, “big photo” wise.
Unless you feel too creative or just don’t possess time and/or patience, a reputable professional design firm (such as Bsleek) should 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 personal image out there – would be to find one of the many galleries online and frequently download a prepared made animated favicon or have a large animated GIF and resize it and/or edit it in another of the countless available tools. There are also sites offering online animated favicon creation from a standard image (have a look at chami.com, locate “FavIcon from pics”, they have a straightforward but neat scrolling text feature).
In case you are however a fellow do-it-yourselfer, then simply let’s elaborate and look at some techniques and helpful tips:
As far as tools go: If you’re a lucky proprietor of Adobe’s excellent Photoshop, then you also have a companion program called ImageReady. Linux consumers have Gimp, an incredibly powerful and free graphics use that may easily handle animated GIF creation. What many people don’t know is that Gimp can be available for free for Windows and the Mac. There is also GIMPShop in the wild, that is a nifty GIMP type for the photoshop-inclined market (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.