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 http://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.
