The Favicon, an Untapped Photograph 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 prolong the operation of favicons, adding them with their tabs. The name was coined based 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 various ways. The favicon allows an organization to further promote its identity and impression by displaying a emblem, a graphical message, etc. Typically, the favicon reflects the appearance and feel of the web page or the organization’s logo.
A traditional favicon is truly a Microsoft Windows ICO data file. An ICO file is truly a repository of bitmap like pictures. They are used because in a few locations a 16×16 pixel photo is desired, and quite often a 32×32 image could be needed. Sometimes a 16 shade image is desired, and oftentimes a 256 color icon is desired.
You probably already knew all the above.
But did you know that Firefox can screen animated favicons? Unless you trust me, open Firefox and head to my site, (there should 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 love the simplicity and capability of tabbed browsing. Even though you aren’t a designer but just a site owner, in the current environment you absolutely must know how your site looks in every browsers. You would believe all websites should look the same, but as browsers are 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 web page don’t look needlessly to say in the most recent version of Opera and must be adjusted.
Ok, I hope right now you noticed my animated favicon in Firefox and returned 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 formatting in favor of the opportunity to display any supported image file format in the favicon location, incorporating BMP, JPG, GIF, PNG and… animated GIFs.
So now you know the big secret, the animated favicon is only a tiny animated GIF.
Here is a very neat trick, that can actually be used to visualize how any graphic looks 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 make a legible image on a 16 square pixels canvas:
Find any webpage with any graphic that you are interested in. Right click the image and chose “View Picture” from the dialog. A blank page should display together with your chosen image and surprise: you can see a miniature 16×16 duplicate of the photograph as a favicon! Uhh… carry out I must mention again that we are doing all of 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 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 type of the animation likewise 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 certainly browser compatibility. Animated favicons aren’t treated at all by Internet Explorer. A static image will never be extracted from the animation also. Alternatively, 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 during this writing. The Firefox family members seems to be the only friend to animations, but as browsers evolve, broader help for animation will most likely come along (or, the idea 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 other location.
3. You hardcode in your page the positioning where Firefox should search for the animation.
That’s really it, “big image” wise.
If you don’t 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 create a nice animated favicon for you. Another option – I don’t endorse it, as your goal should be to excel through unique content and push your own image out there – is to find one of the numerous galleries online and also 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 a standard image (check out, get “FavIcon from pics”, they will have a straightforward but neat scrolling text feature).
When you are however a fellow do-it-yourselfer, next let’s elaborate and look at some techniques and useful tips:
As far as tools go: If you’re a lucky manager of Adobe’s excellent Photoshop, then you also have a companion software called ImageReady. Linux consumers have Gimp, an incredibly powerful and free graphics use that can easily handle animated GIF design. 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 release for the photoshop-inclined audience (did I mention free?). Additionally, there are many specialized GIF animation makers, some freeware, some not.

Related Posts