A favicon is that little image that most browsers display on the
address line and in the favorites (bookmarks) menu. Tabbed browsers like
Firefox and Opera extend the functionality of favicons, adding them to
their tabs. The name was coined based on Internet Explorer (the first
browser to support it) and derives from "Favorites Icon". Each web
browser has a unique user interface, and as a result uses the favicon in
different ways. The favicon allows a company to further promote its
identity and image by displaying a logo, a graphical message, etc.
Often, the favicon reflects the look and feel of the web site or the
organization's logo.
A
traditional favicon is actually a Microsoft Windows ICO file. An ICO
file is actually a repository of bitmap like images. They are used
because in some locations a 16x16 pixel image is desired, and sometimes a
32x32 image may be needed. Sometimes a 16 color image is desired, and
sometimes a 256 color icon is desired.
You probably already knew all of the above.
But
did you know that Firefox can display 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). if you don't 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 if you are not a
designer but just a site owner, in today's environment you absolutely
must know how your site looks in all browsers. You would think that all
websites should look 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 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 because
Firefox abolished the proprietary ICO format in favor of the ability to
display any supported image format in the favicon location, including
BMP, JPG, GIF, PNG and... animated GIFs.
So now you know the big secret, the animated favicon is nothing but a tiny animated GIF.
Here's
a very neat trick, that can actually be used to visualize how any image
looks like as a 16x16 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 page with any graphic
that you are interested in. Right click the image and chose "View
Image" from the dialog. A blank page should display with your chosen
image and surprise: you can see a miniature 16x16 copy of the image as a
favicon! Uhh... do I have to mention again that we are doing all this
in Firefox?
A hacker's mind will immediately think of how great it
would be to use this feature as a conversion tool. Unfortunately,
unlike Internet Explorer and Opera, Firefox doesn't store 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 will notice that a miniature version of the animation also plays
in the address bar and on the tabs.
Perhaps one of the main
reasons why you don't see that many sites using animations is browser
compatibility. Animated favicons are not treated at all by Internet
Explorer. A static image will not be extracted from the animation
either. Instead, the default .htm icon (as defined in Windows'
filetypes) will be placed under one's Favorites - once added, that is.
The animations are not supported by Netscape, Opera, Konqueror, Safari;
at least so it seems at the time of this writing. The Firefox family
seems to be the only friend to animations, yet 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 how it's done:
1. You make a 16x16 animated GIF.
2. You upload the animated GIF to the "root" of your site, or to any other location.
3. You hardcode in your page the location where Firefox should look for the animation.
That's really it, "big picture" wise.
If
you don't feel too creative or just don't have time and/or patience, a
reputable professional design firm (such as Bsleek) should be able to
make 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 many galleries online and
either download a ready made animated favicon or take a large animated
GIF and resize it and/or edit it in one of the many available tools.
There also are sites that offer online animated favicon creation from a
standard image (check out chami.com, find "FavIcon from pics", they have
a simple but neat scrolling text feature).
No comments:
Post a Comment