|
Free Grafix
Archives
Trackion Laptop Tracking
| |
The Favicon, an untapped image promotion trick - Animated favicons?
by Andrei Smith
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.
About the Author
Andrei co-owns Bsleek - a company that specializes in web design, hosting,
promotional items, printing, tradeshow displays, logos, CD presentations, SEO
and more. Andrei has amassed an extensive technical knowledge and experience
through his career as the CIO for a major travel management company and through
his past careers in military research, data acquisition and airspace
engineering.
| |
Back
Home
Up
Next
|
