It's time to create new or re-design your websites to bring it to the next level.

Check out Top 110+ Best Free Joomla! templates Listing of 300+ Best Free WordPress themes

Do you know what a favicon is? It is a small website icon displaying on a browser’s tab and your bookmarks list as well. Moreover, it is also a small piece of customization that goes a long way.

If you want to change the favicon of your site, let follow our introduction below. We will guide you on how to change it easily. Let’s start now!

Step 1: Generate a 16×16 image. In order to do it, you can use some graphic software like Gimp,, Windows Paint or Photoshop. An online tool is also suitable in this step such as Antifacicon.

Step 2: Using some free online sites to convert that image into icon format. Some site available are,,,,

Step 3: The file that you have created will have the extension.ico. Now, let copy the file to the /joomla/templates/<your template> directory and then change the name into favicon.ico.

Step 4: When you finished 3 steps above, let open a browser. If you see your new icon, congregate 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);
  • Opera users may need to completely clear their cache in Tools→Preferences.
  • Chrome: Shift-F5
  • Konqueror: simply click the Reload button or press F5;
  • IE: hold Ctrl while clicking Refresh, or press Ctrl-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 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!

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

in the template HTML and you don’t remove the favicon.ico file. (why call the icon twice?)

From the html.php


That’s all of our tutorial today. Thanks for reading! If you have any questions when you change your Site Favicon, please leave a comment below or contact us through our Contact Page and submit Ticket Support. We will try to answer you as soon as possible.

Are you Web Freelancer or Web Design Company? Join our Club and Access our Resource!

Access 500+ PRO Premium Joomla! and WordPress themes with $19,200 just $149, Quickstart Package included!

Buy one-time, get life-time access!

Access Life-time All-In-One Membership with 500+ Premium WordPress themes and Joomla templates just $239.00 (instead of $399) after discounted! Life-time Access, Download and Support, One-time Payment, No Renewal. Coupon code: WORKATHOME

Join All-In-One Club with 40% OFF on today!

The Pandemic Continues So Do Our Support! We're offering 40% Discount on all purchases! Code: REMOTEWORK More Details
The Pandemic Continues So Do Our Support! We're offering 40% Discount on all purchases! Code: WORKATHOME More Details