How to Change your Favicon in Joomla 3

Changing joomla 3 favicon

You may have noticed in your Joomla 3 websites, that it automatically displays the Joomla logo in browsers by default. This little image is known as a Favicon.
In this tutorial we will show you how to replace the Joomla Favicon with one of your own. This common customization can help people identify your brand logo, and also differentiates your site from other Joomla 3 sites.

Changing your Joomla 3 Favicon

  1. Create your Favicon with the dimensions 16×16 pixels, and make sure the file is named “favicon.ico“. There are many free Favicon Generators online, here are a few of the most popular ones:
    inmotionhosting.com/support/tools/favicon-generator
tools.dynamicdrive.com/favicon www.favicon.cc favicon-generator.org favicon.htmlkit.com
  • Upload your icon to the following folder where your Joomla is installed: /templates/your_template_name
    For example, if you are using the protostar template, your Favicon will be uploaded here: /templates/protostar/favicon.ico
    Refresh your page, then you should be able to see your new Favicon on your website. You may have to clear your browser cache, or test it in a different browser to see the new Favicon.
  • Congratulations, now you know how to customize your Joomla 3 website, by changing your Favicon!

    Thoughts on “How to Change your Favicon in Joomla 3

    • Sven is correct. You should place the favicon in a custom folder. It will change back with every update if you use the above method. Having a hard time finding out how to exactly do that. Having a Protostar favocin that does not change on every update seems to be the hardest Joomla challenge ever…

    • Sven wrote “…so first of all you should put it in a custom path if you don’t want to lose it after every update.”

       

      But how do I tell Joomla to use my icon in that custom path and not the default icon?

      • Hello,

        Thanks for the question about the favicon. According to the official Joomla documentation, the path we provide is the proper one. It may differ depending on the template you use. If the template has a custom path, then you can copy the icon there.

        If you have any further questions or comments, please let us know.

        Regards,
        Arnel C.

    • Can’t find the folder in which to place the favicon, using the online Joomla. I check in files, no favicon. I check in templates, no favicon. PLease provide a description of the path with more specificity.

      • Hello Slanter,

        Apologies for the confusion with the instructions above. They do tell you where the favicon should go. We can’t give you an exact location because we don’t know what theme you’re using or where you may have installed Joomla. However, the location is based on where you installed Joomla and then finding the folder for the theme that you’re using. The example above lists protostar – which is one of the default themes provided with Joomla.

        If you have any further questions or comments, please let us know.

        Regards,
        Arnel C.

    • You can create your own favicon online at http://onlinefavicon.com/ , create favicon using drawing tool or just upload your image jpeg,png or gif file and generate to 16×16 or 32×32 ICO file, or look at the gallery with favicons created by other users and download the same. Finally read the description how to set up favicon to your site!

    • …not good at all – as every time your customer will update the template he will lose the favicon as it will be replaced by the joomla favicon again… 

      …so first of all you should put it in a custom path if you don’t want to lose it after every update. 

    Leave a Reply