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

A favicon can be that little image that a lot of browsers display on the deal with range and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera lengthen the efficiency of favicons, adding them with their tabs. The title was coined predicated on Internet Explorer (the first browser to aid it) and derives from “Favorites Icon”. Each web browser has a unique interface, and as a result uses the favicon in different ways. The favicon allows a company to help expand promote its identity and picture by displaying a emblem, a graphical message, etc. Generally, the favicon reflects the look and feel of the web site 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 images. They are used because in a few locations a 16×16 pixel picture is desired, and quite often a 32×32 image may be needed. Sometimes a 16 color image is desired, and often a 256 color icon is desired.
You probably already knew all the above.
But did you know Firefox can show animated favicons? If you don’t believe me, open Firefox and go to my site, (there should be a link in the bottom of the article). unless you have Firefox, download it, it is a “must have” and you may quickly fall in love with the simplicity and capability of tabbed browsing. Even though you aren’t a designer but just a site owner, in today’s environment you absolutely got to know how your site looks in all browsers. You would believe that all websites should look exactly the same, but as browsers become more diverse and more sophisticated, standards are not respected and things can get messy. For example, I just discovered that a few pages on my site don’t look as expected in the latest version of Opera and ought to be adjusted.
Ok, I hope by now you observed 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 ability to display any supported image structure in the favicon location, incorporating BMP, JPG, GIF, PNG and… animated GIFs.
So now you understand the big key, the animated favicon is only a tiny animated GIF.
Here’s a very neat trick, that can actually be utilized to visualize how any picture appears like as a 16×16 pixel icon – as soon as 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 web page with any graphic that you are interested in. Right click the image and chose “View Graphic” from the dialog. A blank site should display together with your chosen image and surprise: you can see a miniature 16×16 copy of the photo as a favicon! Uhh… perform I must 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 utilize this feature as a transformation tool. Unfortunately, unlike WEB BROWSER and Opera, Firefox doesn’t retail store FavIcons in .ico documents, the icons are stored within an encoded format straight in the bookmark file.
You can apply exactly the same principle to animated GIFs and you may notice that a miniature variation of the animation as well 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 will be browser compatibility. Animated favicons aren’t treated at all by Internet Explorer. A static image will never be extracted from the animation sometimes. Rather, the default .htm icon (as defined in Windows’ filetypes) will be placed 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 at the time of this writing. The Firefox spouse and children seems to be the only friend to animations, but as browsers evolve, broader assistance for animation will probably come along (or, the concept will die).
So, why not take advantage of this *right now* 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 positioning where Firefox should look for the animation.
That’s really it, “big photo” wise.
Unless you feel too creative or just don’t possess time and/or patience, an established professional design firm (such as for example Bsleek) should be able to make a nice animated favicon for you. Another choice – I don’t endorse it, as your goal should be to excel through unique information and push your personal image out there – would be to find one of the numerous galleries online and often 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, discover “FavIcon from pics”, they have a simple but neat scrolling text feature).
If you are however a fellow do-it-yourselfer, subsequently let’s elaborate and appearance at some techniques and valuable tips:
So far as tools go: If you’re a lucky operator of Adobe’s excellent Photoshop, you then also have a companion request called ImageReady. Linux users have Gimp, a remarkably powerful and free graphics software that may easily handle animated GIF development. What many people don’t know is that Gimp can be available for free for Windows and the Mac. Addititionally there is GIMPShop in the wild, that is a nifty GIMP variant for the photoshop-inclined audience (did I mention free?). Additionally, there are many specialized GIF animation makers, some freeware, some not.