Creating the Animated Favicon - Cathetel's little Red Angel

Add Bookmark: Digg reddit BackFlip BlinkList BlogMarks Furl Google ma.gnolia Netscape Simpy Spurl

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 to skinny.


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

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 problem.

Free counters provided by Vendio.