The word "favicon" is short for "favorites icon", and it is the 16x16-pixel icon that is associated with your website and appears in the browser address bar and favorites menu (and in Firefox and Internet Explorer 7, it also appears on the browser tab). For this website, I am using the default Joomla! favicon because this site is a site about Joomla! The image below shows what your browser's address bar should look like when visiting this site.

All Joomla! installations come with that favicon installed, and a common mistake by many webmasters is to ignore the favicon, thereby keeping the default Joomla! icon for their site. Unless your site is about Joomla, you should not be using the default favicon. A good habit to get into when developing sites with Joomla! is to change the favaicon and use something more fitting for your site, like your logo. This article will explain how to create a favicon and then how to replace the default icon with your icon.

Creating your favicon

For the sake of simplicity, this section assumes you are using your logo for your icon.

Step 1: Shrink your logo

Using graphics software (like Adobe Fireworks or Adobe Photoshop), shrink your logo so that it will fit into a 16-pixel by 16-pixel square*. Then, save your new image as a 16x16 PNG or GIF file called "favicon.png" or "favicon.gif".

* It helps if your logo has relatively square dimensions, like the Joomla! logo.

Step 2: Convert the image to "favicon.ico"

This step is actually easier than it may seem. There are several options for doing this step, but my favorite is a web-based tool by Dynamic Drive called the "FavIcon Generator". You simply click the "Browse" button to locate your favicon.png or favicon.gif file, then click the "Create Icon" button to convert your image. The generator will then provide you with a favicon.ico version of your logo. It really is that simple.

Step 3: Replace the default icon with your own

The default favicon is located in the "images" directory of your Joomla! installation. For example, on this site the favicon is located at https://www.howtojoomla.net/images/favicon.ico. Remove the default icon from your site, and upload your new icon in its place.

Done.

You may not be able to see your new favicon right away. The reason for this is because the default icon is probably still in your browser's cache. If you clear your browser's cache, you will be able to see the new favicon.

The favicon is a small thing that really will not affect the performance and look of your site, but paying attention to little details like that will give your site a more finished, professional feel.

As always, please feel free to post any questions or comments.