How to Create an Animated Favicon

Since redesigning this Internet marketing blog, we’ve received numerous comments about our animated favicon.

A favicon is a 16×16 pixel icon that is displayed in the address bar, on tabs and in bookmark lists of your browser.

In this post I will show you how to put a favicon that animates on your web site.

Animated favicons not supported in Internet Explorer

While Firefox is currently the only browser that displays animated favicons, it is easy to code your pages so that supported browsers will display the animated favicon and those that don’t will display a standard favicon. In the future, browsers like Internet Explorer will probably start supporting animated favicons.

3 steps to an animated favicon

• Create a 16×16 pixel animated gif in a program like Photoshop, naming it favicon.gif.
• Upload the favicon.gif file to your web site root folder.
• Add the following HTML tag to your web page between the tags:
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="shortcut icon" href=" favicon.gif" type="image/gif">

The first link is the regular favicon that will be shown in browsers that don’t support animated favicons. The second link is the animated favicon which will be displayed in supporting browsers like Firefox.

Note: This tutorial assumes that a standard favicon has already been created.

Animated favicon generator

Those who don’t know how to create an animated gif can use one of the many animated favicon generator web sites, which automatically generate an animated favicon from an image you provide.

Animated Favicon Generator web sites:

• Favicons from Pics
• Free Favicons
• Favicon Producer

An animated favicon could be just the thing to help your web site stand out from the crowd.

Spread the word:

If you like this post, then consider subscribing to our full feed RSS.

Hm…

I think this doesn’t work with Opera web browser as well.

That’s correct. Animated Favicons only work in Firefox at the moment.

Hi, does this work on IE?

Nice thanks for the quick tip!

How can I make the favicon roll from up to down?

Our animated favicon, a little red angel, works well in both Firefox and Netscape. We have furnished Internet Explorer with a diffrent file to display a static favicon. The guy who wants it to roll from up to down needs to create an animated gif (or png) file that performs this function (find a gif animation program like Lake Clear Animato) create the separate images, then put them together as a tiny movie. Yes, it takes time. Our flying angel took almost 3 hours to create.

You can create animated favicon from my tool.
It is very easy just 3 steps.

PLEASE do NOT use animated favicons! This is incredibly annoying for your users and will just make them go to another site!

PLEASE NOTE animated favicons ALSO animate in the UI tab in FireFox and this is HUGELY distracting and annoying.

It will make users target your site as an annoying site to close immediately.

Please Please use common sense, do NOT use them.

I actually believe it is not simply about the technology. Creating a favicon is not to difficult and there are millions of good-favicons generators out there. The question is: how to design an animated favicon that contributes to the visitors-experience instead of irritates?

I think I’ve made an attempt to find a solution. I have just launched a concept with animated favicons. I’ve created six animated favicons (different favicons for different tabs/ares), integrated with my (own) personal brand strategy. That implies that my face is shown, including attributes. On opening a page (or bookmarks) they are standing still, actually 80% of the time. After a little while, a sometimes funny, movie is played in the favicon.

Here’s the site and a posting with lots of background info:
http://www.erwinvanlun.com/ww/....._favicons/

For the next step I consider let the favicon ‘play’ with the title or starting a sound. That would be great. But it should all be very subtle, as lots of animated favicons will soon irritate.

I’m interested in what you think!