Add a Favicon to your template

Websites can include a small image called a Favicon that appears in your web browser generally on the left of URL field and also in the bookmarks to help visually identify a site. Many are saying that is among the few real good things coming from Redmond, since the Favicon was introduced with IE3, and initially supported only by Microsoft's browsers. But now the support for Favicons became widespread and is one of differentiating factors of a website, essential part of the general look/corporate identity.

The final dimensions of Favicon is 16 x 16 pixels and needs to specifically be in the .ico format. So when you prepare some image files to be source of your Favicon, have these in mind. Images on higher resolution tends to be blurry and unrecognizable if are shrunken to this dimensions. But apart from this, you have no real limitations, but your imagination. Even better, you don't need fancy software to create this. You can create your own easily, just follow these steps:

  • Just create an image of any size using your favorite image editor. Ideally this should have the same horizontal and vertical dimensions. Save it as a .GIF or .JPG.
  • Head over to DynamicDrive and upload your image using the Browse button. Once uploaded, click the Create button.
  • Click the Download Favicon button and save the file on your computer.
  • Joomla seeks for the favicon to serve to your browser in the active template's root directory. Upload the favicon.ico file to your website. It needs to be stored in your templates folder. So if your template is called mytemplate, you would save it in /templates/mytemplate directory. If the file already exists, just overwrite it with your new version.
  • Open your web browser and view the frontend of your website. Your icon should now be displayed to the left of your address bar.

You may have to clear the cache of your browser to see the new icon. Also make sure that there is not another favicon file in your root directory - if there is, delete it. The original specification required the favicon to be placed there, and if you have favicon.ico files in both places - in WEBROOT and in active template's root, the one in WEBROOT might take precedence over your new Favicon.