Implementing Animated and Static Favicons

Animated and Static Favicons - A Simple Guide

You're sure to have noticed the animated favicons (favourite icons) that some sites show in the adress bar of the browser.Its a common question you often come across. 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 ?

Theres probably dozens of ways to achieve this but this is the simplest. So lets get started'

Step 1

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

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. You now have a static favicon saved as favicon.ico favicon static and an aminated one saved as favicon.gif. animated favicon 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 or layouts/template.php ( if using a YOOtheme WARP 5.5 theme ) file and insert the following codes between the 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 HEAD tags ;


Now open up your site in FF and you will appreciate the animated favicon. Open it up in IE7 and IE6 and you have the static favicon. Now when your users bookmark your site they will also see your favicons in their bookmarks/favourites menu.

If you would like to see more simple to follow tutorials by the HerdBoy Web design Team, just drop us a message on our Forum and we will be sure to fire one off for you, or we may have one in our Joomla Tutorial Archive.

Saturday, 11 December 2010 Posted in Tutorials

Leave a comment

You are commenting as guest.

Premium Membership