How to Add Custom Favicon to Genesis Child Themes

Favicons are major website brand influencers and they also help your website visitors to identify your blog or website quickly when there are a ton of tabs opened in their browsers. Generally, the Genesis theme framework and the child themes will display the default Genesis logo as their favicon. But as a website owner, you need to upload your own custom favicon as that increases your brand awareness.

For those of you who don’t know, Favicon’s are nothing but small images that appear next to your website or blog title in the browser tabs. Generally, a favicon image can either be in .png or .ico formats. So, here is how you can add a custom favicon to Genesis child themes in few different ways.

Note: This tip to add a custom favicon will work with any Genesis child theme. Moreover, I assume that you already have a favicon in either 16 X 16 or 32 X 32 size.

Custom Favicons of different websites.

Add Custom Favicon Through functions.php

One way to add a custom favicon to your Genesis child theme is to add the below piece of code in your functions.php file. To start off, you first need to upload the favicon to your child theme’s Images folder. Usually, the child theme is located under /wp-content/themes/ folder. So, fire up your FTP client software and upload the image.

Upload custom favicon.

After uploading the image, open up the functions.php file with your favorite text editor and copy and paste the below code at the end of the file. Don’t forget to change the URL according to your site’s favicon location.

// Add Custom Favicon to Genesis Child Theme
add_filter( 'genesis_pre_load_favicon', 'custom_favicon_filter' );
function custom_favicon_filter( $favicon_url ) {
return 'http://www.example.com/wp-content/themes/theme-name/images/favicon.png';
}

That’s all there is to do and once the code has been added, this is how it looks.

Paste the code for custom favicon.

Add Custom Favicon using Plugin

The other way to add favicon to your Genesis child theme is by using the Genesis Favicon Uploader plugin. You can download and install it like any other WordPress plugin. Once installed, open up the Favicon Uploader page by navigating to “Genesis -> Upload Favicon.”

Install the plugin and upload the plugin.

For this to work, you first need to convert your favicon into .ico format if the favicon is in other formats like .png. Now, simply click on the “Choose File” button, select the favicon and click on the “Upload Favicon” button and you are good to go.

Replace Genesis Favicon with Custom Favicon

Lastly, you can also add custom favicon by just replacing the default Genesis favicon located in the Genesis framework folder.

To do that, open your FTP client, navigate to /wp-content/themes/genesis/images folder.

Here, just replace the favicon.ico with your custom favicon file. Also, make sure that the favicon is in .ico format.

Upload custom favicon to the default genesis folder.

Though this process is really easy, it is not recommended to use this method. This is because, you are directly editing the Framework files and whenever you update the Genesis theme framework, all the files will be replaced and any changes you made will be lost.

That’s all there is to do and it is that simple to add a custom favicon to your Genesis child theme.

Hopefully that helps and do comment below sharing your thoughts and experiences about using the above methods to add a custom favicon to Genesis child theme.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.