Firefox supports animated favicons but IE does not because of different protocols and also because IE is...well we all know that, so how do we get both static and animated favicons working on our sites at the same time ? I am going to walk you through a 4 step process to get your site to display an animated favicon in FF as well as a static favicon in IE6 and IE7(for the technologically challenged persons that still rely on these browsers for whatever reason).

Step 1

Create a static image with your graphics software of choice and save it in that ICO format. Be sure to has the dimensions of 16px X 16px and is saved as favicon.

Step 2

Create an animated gif from the same image in step 1. This is very easy to do in Fireworks and Photoshop. In Fireworks all you have to do is select the image in your workspace and then choose the Modify menu and then Animation > Animate Selection and tweak a few settings to give you the desired animated effect. You need to save this in the GIF format with the 16px X 16px dimension.
I must mention that there are also online tools that can help you create both types of favicons if you are not up to the challenge of creating your own.

--> Online Tool Favicons
You now have a static favicon saved as favicon.ico and an aminated one saved as favicon.gif. Great !

Step 3

Now what do we do with these two favicons ? We upload them to the root of our website. In our case the Joomla root. The same location where you have your Joomla admin, cache, components etc folders. You will notice that a default Joomla favicon.ico exists there but you new one will overwrite it. Don't put them in a folder of their own ! You can ignore the default Joomla favicons in the template folder ean elsewhere.

Step 4

Open up your templates index.php file and insert the following codes between the and of this file.

This is what the code looks like:

and this is what it should look like after you have inserted it between the and tags ;

link rel="shortcut icon" href="/favicon.ico">