Customise Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.

No cookies to display.

5/5 - (1 vote)

As you know, a favicon is a small website icon showing on a browser’s tab and your bookmarks list as well. If its size is not suitable, you can change it easily. Our tutorial today will guide you to do it in real-time.

450px Favicon en 1

Let’s follow us step by step to change the favicon of your site!

Step 1: Create a 16×16 image. You can use some graphic software like Gimp, Paint.net, Windows Paint or Photoshop to help you in this step. An online tool is also suitable such as Antifacicon.

Step 2: Convert that image into icon format by using some free online sites such as converticon.com, favicongenerator.com, htmlkit.com/services/favicon/, tools.dynamicdrive.com/favicon/,www.favicon.cc/.

Step 3: The file that you have generated will have the extension.ico. Copy the file to the /joomla/templates/<your template> directory and then alter the name into favicon.ico.

Step 4: If you finished 3 steps above, let open a browser. In case you see your new icon, congratulate that you have done it successfully. If not, do not worry because it does not mean that you do something wrong. The reason may be your browsers are designed to minimize data traffic and they don’t refresh the favicon whenever they display a page. In this situation, it is necessary for you to refresh more thoroughly. Let’s try some of these ways:

  • Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
  • Konqueror: simply click the Reload button or press F5;
  • IE: hold Ctrl while clicking Refresh, or press Ctrl-F5;
  • Opera users may need to completely clear their cache in Tools→Preferences.
  • Chrome: Shift-F5

If you tried all 5 ways above and it still doesn’t work, you will have to remove the temporary internet files and the history. After that open your page again. You can also remove your favicon, then refresh the browser with F5 and upload the favicon.

The favicon is in another place.

There are several templates including codes that redirect the browser into another icon file or another directory. If you want to define the place for your new favicon should be, let check out the http://yoursite.com/templates/your_template/index.php and look for code including the text <link rel=”shortcut icon”. At this place, you will see the name of the icon file or the directory you need. Now, let copy your icon to that place and provide it a name that link is pointing to. You also need to ensure the security is correct so that your webserver can get access to that file. Let’s see this example below to get a clearer understanding!

Changing the site favicon Joomla Documentation 2

In case you don’t want to just alter the favicon.ico file in its particular template directory, you are able to find the reference to the favicon.ico file in the html.php document. The path is “……..\libraries\joomla\document\html\html.php”. This should prevent the icon from toggling if you use

Changing the site favicon Joomla Documentation 2

in the template HTML and don’t delete the favicon.ico file.

From the html.php

Changing the site favicon Joomla Documentation 3

Conclusion:

We hope that you have changed your site favicon successfully. if having any questions while changing it, do not hesitate to leave a comment below. Thank you for reading!

ET Digital Team

Leave a Reply

Your email address will not be published. Required fields are marked *

For Joomla! users! After update to Joomla! V5.2.4, your header area is removed, how to fix it? Check it out
0010d
0020h
2080m
3060s
Spring Sale! Get 50% OFF for your purchase on today! Coupon code: SPRING50 Redeem Now