Today I've been playing around trying to get an animated favourite icon to show up in my browser address bar. I'm currently running Joomla! 1.5. I battled a little as the method has changed since the Joomla 1.0 releases. Nevertheless it's done now and it's quite a simple process to achieve.

To complete this project you are going to need:

• 1 x 32x32 pixel static icon file and 1 x 16x16 pixel animated gif. I'll give you a link where you can automatically create these if you don't want to make them yourself.

• Access to your current templates “index.php” file, so you can edit a couple of lines of code. I used FTP for this but you can use whatever method you're most comfortable with.

• The ability to upload the icons to your host server.

Firstly if you haven't already done so, create your site icons. A cool site to do this automatically is http://www.html-kit.com/favicon/

Want to display your own logo on the browser address bar and browser tabs? Simply select a picture, logo or other graphic (of any size / resolution) for the "Image to Use" and click "Generate FavIcon.ico" – From the Site.

That about says it all, once you have created the icons download, unzip and upload them to your sites /images directory.

Next on our list is to edit the index.php found inside the directory of the current default site template that you are using. You can check this by entering the backend of the site as an admin, clicking on Extensions and then Template Manager and making note of the template that has the star next to it which is your sites default. It's always good practice to make a backup of this file before editing it. Open the index.php file, make sure there is no other reference to “favicon.ico” in the code, if you find a reference to it then comment the line out or delete it. Now add the following lines of code just before the </head>

1
2

<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="icon" type="image/gif" href="/images/animated_favicon1.gif">

Save your file, upload/overwrite the existing index.php back into your template folder.

There it is, you should now have an animated favourite icon in your browser.