How to Change the Favicon of Your Joomla Site

You must already be familiar with favicons, right? Yes, a favicon is a small icon that represents your website. This icon is best known as the image in the address bar of your web browser.

In this article, we will show you how to change the favicon of your Joomla site, so your website will look more professional and easily recognized by many people. Let's check it out!

What is Joomla & Why It is Important?

Favicons have been around since 1999 with the launch of Internet Explorer 5 and have a variety of other uses, from web browser bookmarks to feed aggregators, from desktop shortcuts to social media shares. It is a small icon in the address bar of your web browser to represent your website. For example:

Since its main role is to represent your website, the image chosen for the favicon is usually a miniature version of the website logo. When you first install Joomla, you're probably familiar with the standard Joomla favicon:

It's a nice enough icon, right? Colorful and easy to recognize. But the problem is, it doesn't represent you, your company, or your website, so it needs to be changed!

Well, it's the little things that count the most. It's the attention to detail that helps turn a good website into a great website.

Step 1: Create Your Favicon

The first thing you need to do is create a new favicon. If you already have one, you can skip this step, but if not you can create one yourself by using any tools such as Photoshop, Gimp, or MS Paint.

There are various handy online favicon generators, that allow you to draw your favicon pixel by pixel, or upload an image to turn it into a favicon.

Here are some free online tools you can use:

• https://www.favicon.cc/
• https://www.favicongenerator.com/
• https://converticon.com/
• https://favicomatic.com/
• https://tools.dynamicdrive.com/favicon/

In addition, make sure the dimensions of your image are 16×16 pixels or 32×32 pixels. The filename can be anything, but we recommend you stick to the de facto standard, e.g. favicon.png, and the image format should be either PNG (W3C standard), GIF, or ICO.

Step 2: Check the Active Templates

After you finish creating the favicon, you need to check what templates are currently active on your Joomla website. Go to the Joomla Administrator page, then select Extensions > Templates.

• Site: The set template for your site.
• Default: An enable template on your site.

Step 3: Upload & Change Your Favicon

The next step is to upload the new favicon via the Joomla directory (Hosting). Firstly, you need to log in to cPanel > File Manager > public_html/joomla/templates/protostar.

After going to the active template directory, there is a favicon file, favicon.ico. If you want to change the favicon, you can just delete the old one and replace it with a new one. 

Once done, you can click the Upload button, then the page will appear like the one below to upload the new favicon file. 

After the file has been uploaded successfully, you can return to the previous page. and check whether the file has appeared or not. Simply refresh the website in your browser and voila! You should see your very own personalized icon in the browser tab.

The New Favicon Doesn't Change?

It's common if you can't see your new favicon after completing the steps above. You can follow a few tips below:

1. Try to clear your browser Cache. Web browsers store a local copy of the favicon file and aren't always that keen to overwrite this local file. You can simply hold "Ctrl" and press the "F5" key to clear your cache, and your updated favicon should appear.
2. Make sure your favicon follows the standard naming convention. The file should be called favicon.png or favicon.ico or favicon.gif.
3. Try instead to replace the favicon.ico in the root directory of your website. Usually, there is also a favicon stored there – yourwebsite.com/favicon?
4. Some Joomla templates provide the option to manually select the favicon file. If all else fails try checking within your template settings for this option.

So, here is the tutorial on how to change the favicon of your Joomla site. What do you think? Hope this article will guide you to change the Joomla website's favicon.

If you like your new icon and want to go one step further you can also do the same for the Joomla backend. Just follow the same steps and replace the favicon.ico here yourwebsite.com/administrator/templates/

Additionally, if you have any inquiries don't hesitate to leave your comments below!