When you want to change the favicon in Joomla! 1.5 there are several steps involved. The goal with this little tutorial is to change this:



to this (or whatever favourite icon you have):

 BTW - You probably already know this, but if you wonder what "favicon" stands for: It is a short for Favourite Icon.

Ok. Let's start.

This tutorial contains these parts:

• How to create your own favicon.ico file
• Where to put the favicon.ico file in Joomla 1.5
• Clearing browser's cache (or not?)
  (This is where the trick is, if you just want to peak at it...)

How to create your own favicon.ico file

There are several ways you can do this

• You can create your own favicon.ico from scratch
• You can copy from something/someone else and modify it (which is not very original)
• You can find a ready made icon that you can use on the Internet (which maybe many people do)

I will consentrate about the first method: Create your own favicon.ico from scratch.
To do this you need a good icon editor. I will suggest IcoFX, which is a free program, and works really well.

You should choose the format 16x16 pixels, and 256 colors.

Then you can just start being creative.

When I create my favicon.ico file I actually do one more step before this... I create my original full size logo in Adobe Photoshop. If you look at my self-designed (yeah, yeah...I am not a professional designer yet) logo in the header of my web page, you will see the "ball" that I am using for my favicon.ico file. It has a transparent background.

This "ball" I designed in PhotoShop to be 70x70 pixels. What I do is:

1. In PhotoShop - Shrink the size of the "ball" to be 16x16 pixels (Image Size).
2. In PhotoShop - Use the "Rectangular Marquee Tool (M)" and click somewhere in the image.
3. In PhotoShop - Press <Ctrl> + A to mark everything.
4. In PhotoShop - Press <Ctrl> + <Shift> + C to perfor the "Copy Merged" command.
5. Start IcoFX
6. In IcoFX - Create an empty 16x16, 256 color icon
7. In IcoFX - Press <Ctrl> + V to paste the content from PhotoShop.

At this point you will be able to make detailed adjustments to the icon if you would like to.

 If you, as on JoomlaBeacon's favicon.ico file want to have transparent background around your icon image: Use the "Selection (S)" tool to mark what you want to remove and press <Delete> / <Del>.

When you have finished your super duper favicon.ico file, save it to a place on your local machine.

Where to put the favicon.ico file in Joomla 1.5

In Joomla! 1.x the favicon file was as default stored in the {your Joomla! site root}/images folder.In Joomla! 1.5 this has been changed so that the favicon file now should reside in the {template root} folder. So, for JoomlaBeacon.net it would be in the /templates/ja_purity_ii folder (or what is left of my ja_purity_ii folder after all my adjustments...).

Use your favourite FTP program to copy the favicon.ico file that you just saved to the root folder of your Joomla! 1.5 template.

If you do not know what FTP program to use, I would suggest WinSCP, which is free FTP program working similar to what NC (Norton Commander) did.

Clearing browser's cache (or not?)

After we have replaced the original favicon.ico file, by saving it to the root folder for our template there is a lot of confusion of what to do. Almost everyone says that you must clear your browser's cache (by i.e. doing <Ctrl> + <Shift> + <Del> in Firefox).

While trying out the best looks for my new favicon file I had to do several changes to my .ico file. Every time I had problems seeing my changes right away, no matter how many times I cleared the cache in my browser the previous version was still there.

Then I found out something smart.... :-)

The solution is very, very simple. Access your favicon.ico file directly in your browser. For JoomlaBeacon.net that would be http://joomlabeacon.net/templates/ja_purity_ii/favicon.ico.

Uhh...that did not work you will maybe say...? Try pressing <F5> (refresh) on your direct favicon.ico link. See it..? You should.
This has worked for me every time in Firefox, which is my favourite browser. I am not an IE fan...but I think that the clearing of the cache, and restarting of the browser will do the trick there.

The conlucion is: If you have problems seeing your favicon changes appear, try to access the favicon.ico file in your browser directly.


Well, completes this little tutorial about how to change the favicon file in Joomla 1.5.

I hope it has been helpful for you.

~ TJ