Age Themes

Are you finding a tutorial to help you change the favicon of your site such as resize it to be bigger or smaller? Today we will help you do it easily. Our article today is about how to change the favicon of your site.

Let’s follow us and do it quickly!

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: Using some free online sites to convert that image into icon format. Some sites available are 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. 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);
• 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.

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

In Conclusion:

Thanks for your attention! We hope that you have changed your favicon successfully. While changing it, if having any problems or questions, please give us a comment below. We will try to answer you as soon as possible.

AgeThemes Digital Team

We’re Digital Content Marketing team from AgeThemes Marketplace. We provide quality content for everyone who using open source CMS like Joomla and WordPress. If you have any questions or feedback, feel free leave your comment, we happy to assist you asap.