Engine Templates

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.

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!

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 don’t delete the favicon.ico file.

From the html.php

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

We’re a Digital Team from EngineTemplate with 5 content experts. Our team has 5 years exp in open source Joomla and WordPress, we make daily blogs and build useful resources for everyone who is having issues with open source while using it.