A favicon can be that little image that a lot of browsers display on the handle collection and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera prolong the functionality of favicons, adding them with their tabs. The brand was coined predicated on Internet Explorer (the first browser to support it) and derives from “Favorites Icon”. Each web browser has a unique user interface, and for that reason uses the favicon in different ways. The favicon allows a company to further promote its identity and picture by displaying a emblem, 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 actually a Microsoft Windows ICO record. An ICO file is truly a repository of bitmap like pictures. They are used because in a few locations a 16×16 pixel photograph is desired, and often a 32×32 image could be needed. Sometimes a 16 coloring image is desired, and quite often a 256 color icon is desired.
You probably already knew all of the above.
But did you know that Firefox can exhibit animated favicons? Unless you 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 may quickly fall in love with the simplicity and convenience of tabbed browsing. Even if you are not 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 become more diverse and much more sophisticated, standards aren’t respected and things can get messy. For example, I simply discovered that a few pages on my site don’t look as expected in the most recent version of Opera and need to be adjusted.
Ok, I hope by now you saw my animated favicon in Firefox and came back to the article to learn more about it…
The main reason why you can see animated favicons in Firefox is basically because Firefox abolished the proprietary ICO data format in favor of the ability to display any supported image file format in the favicon location, like BMP, JPG, GIF, PNG and… animated GIFs.
So now you understand the big secret, the animated favicon is only a tiny animated GIF.
Here’s a very neat trick, that can actually be used to visualize how any image appears like as a 16×16 pixel icon – once you start designing one of those, you will realize that it is very hard to produce a legible image on a 16 square pixels canvas:
Find any web page with any graphic that you will be interested in. Right click on the image and chose “View Photograph” from the dialog. A blank webpage should display with your chosen image and surprise: you can observe a miniature 16×16 duplicate of the impression as a favicon! Uhh… carry out I must mention again that people are doing all of this in Firefox?
A hacker’s mind will immediately think about how great it could be to use this feature as a transformation tool. Unfortunately, unlike WEB BROWSER 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 may notice that a miniature type of the animation as well plays in the target bar and on the tabs.
Perhaps one of many reasons why you don’t note that many sites using animations is usually browser compatibility. Animated favicons aren’t treated at all by WEB BROWSER. A static image will never be extracted from the animation either. Alternatively, 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, however as browsers evolve, broader assistance for animation will most likely come along (or, the concept will die).
So, why not take advantage of this *nowadays* 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 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 picture” wise.
Unless you feel too creative or simply don’t have time and/or patience, an established professional design firm (such as for example Bsleek) will be able to create a nice animated favicon for you personally. Another choice – I don’t endorse it, as your goal ought to be to excel through unique content material and push your own image out there – is to find one of the numerous galleries online and frequently 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 are also sites offering online animated favicon creation from the standard image (have a look at chami.com, discover “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 appearance at some techniques and valuable tips:
As far as tools go: If you are a lucky operator of Adobe’s excellent Photoshop, you then also have a companion request called ImageReady. Linux customers have Gimp, an incredibly powerful and free graphics program that can easily handle animated GIF design. 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, that is a nifty GIMP type for the photoshop-inclined visitors (did I mention free?). There are also many specialized GIF animation makers, some freeware, some not.