The Favicon, an untapped image promotion trick - Animated
favicons?
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).
If you are however a fellow do-it-yourselfer, then let's
elaborate and look at some techniques and useful tips:
As far as tools go: If you are a lucky owner of Adobe's
excellent Photoshop, then you also have a companion application
called ImageReady. Linux users have Gimp, an incredibly powerful
and free graphics application that can easily handle animated
GIF creation. What many people don't know is that Gimp is also
available for free for Windows and the Mac. There is also
GIMPShop in the wild, which is a nifty GIMP version for the
photoshop-inclined audience (did I mention free?). There are
also many specialized GIF animation makers, some freeware, some
not.
Things to remember when designing animated favicons:
You have control over the number of times your animation will
play. Any decent animated GIF editor will ask you whether you
want your animation to play once, several times (you specify a
number) or forever. It is also important to know that after the
animation cycled the predetermined amount of time, it will
remain still on the last frame (not the first one!), so make
sure that frame contains the image you want displayed at the end
of the cycle.
If you really need to, you can set it to loop continuously.
However, out of curtsey to those paranoid about their computer
resources being eaten alive by your animation and to those who
find animated things in general terribly annoying, I always
recommend that you set up a finite number of times your GIF will
cycle through the animated sequence. 6 sounds like a good,
conservative number, 12 is on the medium side.
By limiting the number of times your GIF plays, you might even
set a cool viral marketing effect, where visitors will just
click through your pages to see the animation start over. I
clearly remember when I first saw an animated favicon years ago
(on the first iterations of the Mozilla browser), the animation
was set up to cycle once, and I found myself refreshing the
pages over and over, and even clicking through the site just to
see it again and again. I don't care what anyone says, people
are attracted to eye candy.
So you made your animation and are very proud of it. Now it is
time to upload it to your web server. You can put it anywhere
you want, in any folder you desire. The old school webmasters
who follow Microsoft's teachings will be very much appalled by
this statement. They will tell you that if you don't name your
icon favicon.ico and if you don't put in the very root of your
site, it will not work. With Firefox and animated favicons
things are very liberal, you can name your animation anything
you want (.gif) and place it anywhere you want. You just have to
place a special tag on every page that points to the gif.
Here is the big problem: All this works fine in Firefox, but
what about the rest of the browsers?
Well, for maximum compatibility you'll have to make a regular
favicon.ico and upload it to the root of your website (that's
where your very first index.xxx home page is, where xxx is htm,
html, php, cfm, etc..). Then we'll add the following two lines
of code to every page that you want to pull and display the
animation.
Please remember to replace the "{" and "}" brackets with the
standard HTML ones, "<" and ">". I had to use the curly ones
here in order not to confuse article sites. The code has to be
placed between the {HEAD} tag and the {TITLE} tags. It might
possibly work otherwise, but your HTML code will not be fully
W3C compliant:
{LINK REL="SHORTCUT ICON"
HREF="http://www.mydomain.com/favicon.ico"} {LINK REL="icon"
HREF="http://www.mydomain.com/favicon.gif" TYPE="image/gif"}
Of course, replace "mydomain.com" with your own domain,
favicon.ico is a standard favicon, favicon.gif is your newly
created animated GIF. Again, it can as well be
mydomain.com/somefolder/somename.gif.
Always hardcode the location, use absolute addresses (as in the
example) and not relative ones ("../favicon.gif").
The first line of code is a standard, a-la Microsoft command
that tells the majority of browsers to load a standard
favicon.ico.
The second line of code is for Firefox only, instructing the
browser to load the animated version.
As a side note, if you forgot to add the two lines of code to a
page, that page should pick the default favicon.ico, but only if
you already loaded it via one page that had the code in it, or
if the page was bookmarked. Additionally, sometimes, Internet
Explorer will just refuse to show a favicon...
If the above sounds strange (if it doesn't, what are you doing
reading my articles??), I talk about how to create a favicon.ico
and about some of the favicon's stranger behaviors in my other
related articles. Just Google for "The Favicon, an untapped
image promotion trick" (with quotes).
One last thing: I feel that this article will not be complete if
I don't support those folks who look at the animated favicons
the same way the world looks at the text blink "feature" from
the early nineties and would like to forever wipe it of the face
of the web.
You can disable favicons - animated or not & site icons in
Firefox. Here's how: Open a Firefox window. Type "about:config",
without the quotes, in the address bar. Hit enter or click Go.
Scroll down slightly to "browser.chrome.favicons" and double
click it to change it to "false". This gets rid of the favicons.
If you also want to stop seeing site icons, then look right
below for "browser.chrome.site_icons", double click it to change
it to "false". Close all Firefox windows. When you reopen
Firefox, the pesky little icons should be gone.