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

A favicon is certainly that little image that a lot of browsers display on the deal with line and in the favorites (bookmarks) menu. Tabbed browsers like Firefox and Opera lengthen the operation of favicons, adding them with their tabs. The brand was coined predicated on Internet Explorer (the initial browser to aid it) and derives from “Favorites Icon”. Each web browser has a unique user interface, and for that reason uses the favicon in various ways. The favicon allows an organization to further promote its identity and photograph by displaying a logo design, a graphical message, etc. Usually, the favicon reflects the appearance 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 some locations a 16×16 pixel photo is desired, and sometimes a 32×32 image may be needed. Sometimes a 16 coloring image is desired, and oftentimes a 256 coloring icon is desired.
You probably already knew each of the above.
But did you know Firefox can show animated favicons? Unless you believe me, open Firefox and head to my site, (there should be a link at the bottom of the article). unless you have Firefox, download it, it’s a “must have” and you will quickly fall in love with the simplicity and convenience of tabbed browsing. Even though you aren’t 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 are 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 web-site don’t look needlessly to say in the latest version of Opera and should 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 see animated favicons in Firefox is basically because Firefox abolished the proprietary ICO structure in favor of the ability to display any supported image file format in the favicon location, including BMP, JPG, GIF, PNG and… animated GIFs.
So now you understand the big top secret, the animated favicon is nothing but a tiny animated GIF.
Here is a very neat trick, that can actually be used to visualize how any impression appears like as a 16×16 pixel icon – as soon as 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 the image and chose “View Photograph” from the dialog. A blank page should display with your chosen image and surprise: you can observe a miniature 16×16 backup of the photograph 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 of how great it could be to use this feature as a alteration tool. Unfortunately, unlike Internet Explorer and Opera, Firefox doesn’t retail outlet FavIcons in .ico documents, 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 version of the animation in addition plays in the deal with bar and on the tabs.
Perhaps one of many reasons why you don’t note that many sites using animations is certainly browser compatibility. Animated favicons are not treated at all by Internet Explorer. A static image will never be extracted from the animation often. 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 the very least so it seems at the time of this writing. The Firefox family members seems to be the only friend to animations, but as browsers evolve, broader support for animation will probably come along (or, the concept will die).
So, why not take advantage of this *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 image” wise.
If you don’t feel too creative or just don’t possess time and/or patience, an established professional design firm (such as Bsleek) will be able to create a nice animated favicon for you personally. Another option – I don’t endorse it, as your goal ought to be to excel through unique content and push your own 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 a standard image (check out, find “FavIcon from pics”, they will have a simple but neat scrolling text feature).
For anyone who is however a fellow do-it-yourselfer, next let’s elaborate and appearance at some techniques and beneficial tips:
So far as tools go: If you are a lucky user of Adobe’s excellent Photoshop, you then also have a companion use called ImageReady. Linux consumers have Gimp, an incredibly powerful and free graphics use that may easily handle animated GIF development. What many people don’t know is that Gimp can be available for free for Home windows and the Mac. Addititionally there is GIMPShop in the wild, that is a nifty GIMP type for the photoshop-inclined audience (did I mention free?). Additionally, there are many specialized GIF animation manufacturers, some freeware, some not.

Related Posts