Learn Joomla

Extendable CMS platform that allows for seamless creation of basically every type of website!

• Last Updated: 02/13/2020
• ( 3 minutes reading )

How to change the Favicon in Joomla

Introduction

Favicon is the icon that appears in the browser title bar when you access a particular website. In this tutorial, we will step-by-step guide you on how to change this default Joomla favicon and set up a custom one. Configuring your custom logo as Favicon will positively impact your online recognition and help your users to quickly identify your brand.

 

Getting Started

You have most surely notice that after the installation of Joomla, its default logo is configured on your website.

 

Default Joomla Favicon

 

Changing the default Favicon is a relatively simple task to accomplish. But before we step into actually changing it, we will need to get you prepared.

First, the favicon image must be 16 x 16 pixels in size. If it is not, you will need to resize it by using your favorite software or any available online tool.

Second, the image file must be in the “.ico” format. You can use a file converter tool to generate or convert your file into .ico format. For your convenience, we will include a few free online tools.


When your image is prepared, you are ready to begin!

 

Changing the Favicon

Now that you have your Favicon image ready, all you need to do is to rename it to “favicon.ico” and upload it to your web hosting account under the directory of the template you are currently using (/joomla/templates/your-template). Once you are located under the Joomla root directory, you will need to navigate to the “templates” folder and access the folder of the theme you are using.

You can upload your Favicon through the “File Manager” integrated into your cPanel account. Detailed instructions on how to upload files via the “File Manager” you may find in our guide based on How to manage the files of your hosting account using the File Manager feature.

Alternatively, you can use your favorite FTP Client. You can find instructions in our tutorials based on how to upload files using various FTP clients in the FTP Services tutorials.

Please note that if the default Joomla Favicon image is not removed from the template directory, you will receive a warning message stating that it will be overwritten by the new image. In order to proceed with the upload process, you need to confirm you agree.

In case you are not sure which is the template you are using for your Joomla website, you can always double-check it in your Admin Dashboard. Once you are in, please navigate through the top menu bar to Extensions > Templates > Styles.

On this page, you will see the template in use highlighted with a yellow star symbol under the “Default” column.

 

Selecting the new favicon image

 

Now, after your Favicon is successfully uploaded, it is time to check the result. Please bear in mind that in most cases, you will not be able to see the new favicon image due to browser-side caching. A simple page refresh will not resolve that; therefore, you will need to refresh the page by ignoring the cached content. Depending on the browser you are using this is achieved as it follows:

  • Chrome - Shift + f5
  • Mozilla Firefox - Ctrl + Shift + R
  • Safari - Cmd + Shift + R
  • Internet Explorer - Ctrl +f5

Alternatively, you can always manually clear the cache through the browser settings.

 

New Favicon image

 

And there it is - your brand new Favicon.

Well done! You have managed to successfully configure a custom favicon icon on your fabulous Joomla website. We hope you have found the information in this guide useful and our instructions easy to follow. In case you have any further questions, please feel free to address them to our Support Team.

 

 

...
Sebahat
Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.