Every business and specially business having a website has its specific copyrighted logo. So, in most cases when a particular user visits the site, he will get to see the same logo image in the browser bar along with the page name that he is viewing. However, it can be different than the logo image, it is a personal choice of the site owner.

Using such favicon icons in browser bar is actually a very good idea as it makes your site look professional as well as also serves your site branding purpose. We all will agree that by just seeing the favicon icons we recognize that it belongs to which site such as “Facebook”, “Gmail” etc 

Create/change the favicon icon

We have always leaned towards the progressive attitude and so adapted so many changes in our theming process for the better code development and user experience in our journey of 5 precious years. That is why, the themes created during different duration of time have different locations and process of changing this favicon icon. Let’s decode it,

Old themes (Non supreme based like Answers)

First of all, how will you know that the theme is supreme based? Well, it is not that difficult, just login to your members area and expand the theme section that you are using, if there is nothing mentioned about supreme theme folder then your theme is not based on supreme.

To explain the procedure of uploading favicon icon, an example of “Answers” theme has been taken here. So, you can have a basic idea about it and locate it in your theme easily. (Tip: You should also read your theme guide to know more on it).

• Go to wp-admin -> Answers -> Design Settings -> General Settings
• Expand the option “Favicon” and enter the full image URL here and save the settings
• Refresh your website to see the effect.

Similarly, for some eCommerce Framework based themes (like DigitalBox etc) you can do this,

• Go to wp-admin -> Theme options -> Theme options
• Expand the section “General Settings”
• Enter the image path of your icon file in the field “Favicon”
• Save the settings and refresh your browser to see the effect.

Supreme based themes (Catalog, specialist etc)

Below mentioned steps are explained taking “Specialist” as an example. You can get the basic idea of uploading favicon with it. However you should follow your theme guide as well to know its exact location.

• Go to wp-admin -> Appearance -> Customize
• Expand the section “Site Logo”
• Upload your icon image there and save the settings
• refresh your site to see the effect

New themes (like 5 star, Landing page, Directory etc)

All the new themes provide you a customizer from where you can do a simple image upload procedure as mentioned below,

• Go to wp-admin -> Appearance -> Customize
• Expand the section “Site Logo”
• Upload your icon image there and save the settings
• refresh your site to see the effect

But from where does it come into effect?

Basically the favicon icon that comes with the theme is of “Templatic”. You can find it here,

• Go to your active WordPress directory and locate your theme root folder.
• Open the “images” folder, you will find an .ico file named “favicon”
• If you are using supreme based themes, this .ico file will be inside the image folder located under the supreme folder.
• If you are using latest themes like Directory, 5 Stars etc then you can locate this favicon.ico file in the image folder given under the folder “library” in your theme root folder.