How To Change Genesis Favicon – 3 Different Methods

In this post, I will share three different ways to change favicon in genesis theme. First I will explain how to use custom hook and then I will let you know about a WordPress plugin with which you can perform this task with ease. Finally, I will tell you how to perform this task manually.

Add favicon in genesis theme

Favicons are basically the small image which you see on the browser’s tab when you visit any website. They are usually of 32 X 32 pixel large and can be of .png or .ico format.

In this post I am assuming that your website is powered by genesis framework as this tutorial is only meant for it.

Using custom PHP function

Now if you have been using genesis for a decent time then you might be knowing about its hooks and filters. With help of these hooks and filters you can customize the basic structure and design of your child or the parent theme.

In our case you need to use genesis_pre_load_favicon filter. Just copy the code snippet provided below into your child theme’s function.php file and click on save button.

add_filter( 'genesis_pre_load_favicon', 'new_icon' );
function new_icon( $icon) {
    $icon = 'http://link-to-your-icon';
    return $icon;
}

In the above code snippet replace “link-to-your-icon” with the link to your favicon.

Now let me explain you this custom php code. For this tutorial, I have created a new function named new_icon. In this new function, I have assigned a new variable named icon and this variable stores the new information. In our case, the information is the link to your favicon.

Manually Upload

The second method is to upload the favicon manually into your theme’s sub folder named images. Now inorder to complete this process you will either need an ftp that’s file transfer protocol software or access to cpanel.

For this tutorial, I am assuming that you are going to use your cpanel. So let’s start.

• Login to your hosting account.
• Login to your cpanel account.
• Now click on file manager.
• Now inside your website’s folder navigate to wp-content folder.
• Inside wp-content move to themes and then move inside your child theme’s folder.
• Once you are inside it browse through the images folder and delete the default favicon and upload the new one.
• If you use any cache plugin and cdn service then take trouble to flush their cache.
• Now reload your browser to see the effects.

Note: It is possible that you will not the changes in your website, but actually everything is correct in the background. You can clear all the cache of your browser to see the changes instantly.

Important:: Remember that your favicon won’t work until and unless its name is exactly the favicon.ico ( ico is the format of your image ). You can use any free or premium image editor to create it.

Use genesis favicon uploader plugin

I think it’s probably the easiest method to give custom branding to your website. It’s a free plugin and is available on official WordPress plugin’s directory. But the only problem with this plugin is that it’s not been updated since last 3 years, but it still works perfectly. I think the simple reason for its perfect working is that since 2010 the custom filter or function of genesis has not changed except that of the HTML 5 structures.

Please kindly follow these steps to complete your task smoothly.

• First visit your WordPress administration panel.
• Move to your plugin page and search for genesis favicon uploader.
• Click on install button.
• Now visit to new option page under Genesis. You will see a page with similar content.
• Click on browse button and select your image.
• Now click on upload button and refresh your website to see the changes.

Download

I wish this tutorial would be helpful for you and for your website. If you have any queries or problems then please let me know in comment section. And please, don’t forget to share it with your friends.