Skip to content

Replacing the Joomla favicon

In this tutorial I explain how to replace the default Joomla! favicon with one of your own, as this is something that I am asked about regularly.

Wait a minute! What's a favicon?

OK, good question! Though, you undoubtedly know what a favicon is, even if you don't know that you do! A favicon is the small square graphic that appears at the left side of the navigation bar in your browser, immediately before the URL. It is also shown on tabs (if you are using a browser that supports tabs) and bookmarks.

A favicon enables people to quickly recognise a site in a long list of bookmarks, or string of tabs and adds a nice personal touch to a website. Not every website uses a favicon, but most do and they are becoming increasingly popular.

Joomla! comes with a favicon by default, the instantly recognisable Joomla! logo. Here's a screenshot showing mine:

favicons

You can see in the image above how the Joomla! logo appears in my browser bar, my bookmarks and on the tab. I have two tabs open, the Joomla! admin interface and my site's front-end. As you can see, I have replaced the favicon on my site's front-end and left the admin interface favicon as the default.

Why should I change the favicon?

You don't have to. I did for two reasons:

  1. I think it adds a nice finishing touch to a site, to me a site just doesn't seem complete without a complementary favicon. You brand everything else don't you?
  2. It makes it a *little* bit harder to tell that my site is running Joomla! and so adds a small degree of extra security (not much, I know!).

OK, so how do I do it?

I have seen a number of tutorials and how-to's that make replacing the Joomla! favicon seem quite complicated. In reality it is incredibly easy to do. Just follow these five steps:

  1. Create a square image, with your favourite image editor, that you want to be your favicon. The final favicon will be only 16 x 16 pixels, but as I find it a little tiring to work at that scale I work with a 100 x 100 pixel image at this stage. This is the tricky part as your design will need to be recognisable at the tiny 16 x 16 pixel size. So, big, bold and clean is key. Thin lines will simply dissappear, as will the spaces between elements. Save your square image as .gif, .jpg, .png or .bmp. If you have used transparency in your design, and you want to preserve that, .png or .gif are your only options.
  2. Visit a favicon generator site and upload your image. My personal choice is Dynamic Drive's Favicon Generator because it offers the ability to create a merged favicon file that includes different sized icons. Why would you want that? Bookmarks can be dragged onto a users desktop where icons can be displayed as 32 x 32 and 48 x 48 pixel icons. Creating a favicon that merges 3 different icons like this is a nice way to provide for those people who drag stuff onto their desktop. If you don't care about those people just leave the two option boxes unticked, browse to the image file you saved from step 1 and hit 'upload'.
  3. Save the file as prompted. It will be called favicon.ico, don't rename it.
  4. Upload the favicon.ico file to your Joomla! templates folder using FTP and replace the existing file of the same name. Make sure that you are in your *template* folder, i.e.: \templates\yourtemplate\ *not* the images folder of your Joomla! install which also contains a favicon.ico file.
  5. Clear your browsers cache and visit your site. If you don't see the new favicon, clear the browser cache again and reload the page.

    That's it!

    If you know a better way to do it, you have any questions or you just like to comment on stuff just use the form below.....