How to Change the Favicon of Your Joomla 3 Website

How to Change the Favicon of Your Joomla 3 Website

If you run your own brand or have designed a special logo for your Joomla website, changing the favicon becomes necessary. The default favicon of every Joomla site is a small Joomla logo, while a custom one brings a better visual pleasure to visitors, and it also makes your website/brand more unique and memorable.

Accomplishing the task is easy, and below is a step-by-step tutorial about replacing the Joomla logo with your favicon.

Step 1: Prepare Your Favicon

Assumed that you need to do everything from the ground up, first of all you have to create an image, which is your website logo, with a dimension of 16×16 pixel. Save the image with the name “favicon” and select whatever format you want. You may make use of graphic software like PhotoShop and Fireworks.

Create a Favicon

Next, you need to convert the image to the ico format. Only the images with the extension .ico can be used as a favicon. You can do this by using online favicon generators. This kind of tools can be easily found, and for the example below, we use a free site http://www.favicon.cc/.

When you land on the website, click on “Import Image”.

Import Image

Select the image created before from your local computer and upload it.

Upload Image

If you need some adjustment to the image, use the Color Picker to paint your logo in the squares.

Paint Favicon

When you finish the painting, scroll the screen down and click on “Download Favicon”.

Download Favicon

Open the file in the download folder and you will find that the image has been named as “favicon.ico” automatically.

Step 2: Replace the Old Favicon

Since you have got the logo well prepared, now you need to upload it to the template you use. Just log into your server, access templates/template-name and upload the favicon.ico file to this template folder to replace the old one. The “template-name” refers to the name of the template that you are currently using on your Joomla site.

Note that the file name must be “favicon.ico”. If your image has a different name, you should rename it.

Replace Favicon Image

The required file name and location mentioned above apply to most Joomla templates, but some templates may use code to redirect the web browsers to another directory and another favicon file.

To find the exact place where the new file should be, you can visit http://yourdomain.com/templates/template-name/index.php. There should be a line which looks like the example below. This line indicates the directory and the file name of the favicon, so you can upload your image there. Still, remember to make the file name right.

<link rel="shortcut icon" href=http://yourdomain.com/templates/
template-name/image/favicon.ico />

After placing the new favicon in the correct directory, you can open a browser and visit your website to see the new icon. If it does not display in the browser, do not worry. Try to refresh the page, and you should be able to get the problem fixed.

If there is still an issue, you may need to clear the browser cache and use more browsers to test the favicon.