Creating the Animated Favicon - Cathetel's little Red Angel
Step 1: The Conception
Use your imagination. Don't mimic everyone else.
We studied some favicon galleries, and we didn't like most of what we saw.
We did not like squares. We liked recognizable shapes. We did not like
hard-to-see oddities. For images that are reduced to favicon size, we didn't
want people saying, "What is that thing?" We did not like too many colors.
And we did not want it to look like anything we had seen before, in particular,
letters of the alphabet.
We chose the angel, because Cathetel is the Angel of the Garden. But
the small size meant we could not go for detail, so we reduced the concept
to just the wings. We do not like wings that look like ears, the
kind that you can buy and hang around your shoulders and wear to a Halloween
party. They had to look more like they were able to fly. So we chose
the wings of a dove. We then modified those wings, reducing them to a
simple recognizable shape, and we made them red, since some angels are
known to be red.
The result is what you see here. We used two programs, the Paint program
that comes with Windows, and Photo Editor, which performs like any
program that can adjust the size and quality of pictures.
Step 2: The Animation
Since wings can fly, the animation made sense. We took
our wings and ran it again and again through Photo Editor, retaining
the height, but shrinking the width. Here are the ten images from fat
Step 3: Making It Favicon Size
Using Photo Editor, the above images were then reduced to favicon size,
16 x 16 pixels. The results are as follows.
Step 4: Making The Animated Favicon
There are many programs available that animate images for use
in making animated banners, and so forth. Some of them include:
Animagic, GIFmation, PhotoGIF, and SuperGIF. But the one that we
use is Lake Clear Animato. We selected the size (16x16), we chose
a transparent background, so that the white background around
our wings would not show on browsers that accept transparent images
(Netscape and Firefox). We chose 18 cels into which we inserted
each of the images. First the wings shrank and appeared to close, then
they expanded and appeared to open. We chose a speed that was
comfortably slow to view the motion without overwhelming the observer.
The result is the animated GIF that follows.
Step 5: Making The Static Favicon
To make the static picture that would be used in Internet Explorer,
we chose our first large, open-winged image of the angel.
Then we selected an online favicon-making service. There are many of them
around, but we like the
Favicon Generator that you can find at DynamicDrive.com.
You need to help the process along, cropping your image ahead of time
and reducing it to a square size, but keeping it larger than 16x16.
Then let the Favicon Generator browse the image and convert it into
the "favicon.ico" file.
The following image is the result.
Step 6: Creating the Code For the Favicon
Use the following code structure. You will enter the code into the
head section of your html.
Adjust the code where it says: "/yourdir/filename.gif". Change "yourdir"
to the directory where you have stored your animated image. Change
"filename.gif" to the name of your animated file. (It could be a .gif or
a .png file).
Your static favicon should have the name "favicon.ico" and is best placed
into the root directory.
That's it. You're done. Except for testing.
When the Favicon refuses to display in Internet Explorer
Every so often Internet Explorer gives me a headache and refuses to
show the static version of the favicon. Even though the code is correct,
and the favicon.ico file is located in the root directory, and I have refreshed
the browser, there is still one more thing to try.
In Internet Explorer, select Tools, Internet Options, then delete the
temporary internet files and delete the history files. Then
refresh your browser.
If this doesn't work, then there is one more trick to try. Even though
your file: "favicon.ico" is already located on the root directory, send
it up again. In other words, refresh the copy on your server. Then
refresh your browser. This should finalize that pesky Internet Explorer