A favicon will be that little image that a lot of browsers display on the handle brand and in the favorites (bookmarks) menus. Tabbed browsers like Firefox and Opera expand the functionality of favicons, adding them with their tabs. The label 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 help expand promote its identity and photo by displaying a company logo, a graphical message, etc. Typically, the favicon reflects the look and feel of the web page 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 images. They are used because in some locations a 16×16 pixel picture is desired, and often a 32×32 image could be needed. Sometimes a 16 shade image is desired, and in some cases a 256 coloring icon is desired.
You probably already knew each of the above.
But did you know 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 at the bottom of the article). unless you have Firefox, download it, it is 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 all browsers. You would believe 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 just discovered that a few pages on my web page don’t look needlessly to say in the latest version of Opera and have to be adjusted.
Ok, I hope by now you saw my animated favicon in Firefox and came back to the article for more information about it…
The main reason why you can view animated favicons in Firefox is because Firefox abolished the proprietary ICO structure in favor of the ability to display any supported image data format in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big magic formula, 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 – once you start designing one of 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 Picture” from the dialog. A blank webpage should display with your chosen image and surprise: you can view a miniature 16×16 backup of the impression as a favicon! Uhh… carry out I must mention again that people are doing all this in Firefox?
A hacker’s mind will immediately think of how great it would be to utilize this feature as a alteration tool. Unfortunately, unlike Internet Explorer and Opera, Firefox doesn’t retail store FavIcons in .ico data 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 type of the animation furthermore plays in the tackle bar and on the tabs.
Perhaps one of many reasons why you don’t see that many sites using animations is browser compatibility. Animated favicons are not treated at all by WEB BROWSER. A static image will not be extracted from the animation possibly. Rather, the default .htm icon (as defined in Windows’ filetypes) will undoubtedly be placed directly under one’s Favorites – once added, that’s. The animations are not backed by Netscape, Opera, Konqueror, Safari; at the very least so it seems during this writing. The Firefox friends and family seems to be the only friend to animations, yet as browsers evolve, broader support for animation will most likely come along (or, the concept will die).
So, why not benefit from 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 other 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 simply don’t have time and/or patience, a reputable professional design firm (such as for example Bsleek) will be able to make a nice animated favicon for you. Another option – I don’t endorse it, as your goal ought to be to excel through unique content material and push your personal image out there – is to find one of the many galleries online and possibly download a prepared made animated favicon or take a large animated GIF and resize it and/or edit it in one of the many available tools. There are also sites offering online animated favicon creation from the standard image (have a look at chami.com, locate “FavIcon from pics”, they will have a straightforward but neat scrolling text feature).
When you are however a fellow do-it-yourselfer, then let’s elaborate and look at some techniques and helpful tips:
So far as tools go: If you are a lucky user 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 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 edition for the photoshop-inclined crowd (did I mention free?). Additionally, there are many specialized GIF animation makers, some freeware, some not.