Adding A Custom Favicon To Genesis Child Theme (Functions.php Tutorial)

In this post, I'll show you how to add a custom Favicon to your Genesis child theme the simplest way possible, and without the need to install yet another plugin on your website.

A frequently asked question that I get with Genesis theme users is this:

How do I add a custom Favicon to my Genesis child theme, without using a plugin?

Well, you'll be pleased to know that this process is relatively simple to do, and I'll show you how in just a moment.

The importance of using a custom Favicon

Before we start, I just want to share with you why I think it's important to use a custom Favicon if you have a website of any kind.

Whether you use a custom designed website or a WordPress website with some kind of ready-made theme installed, it's important to give your site a unique identity, especially if it's your personal brand or a website for your small business.

You want to stand out and be memorable with your website, right? So, what better way to do this than to give your site a custom Favicon?

I've noticed recently that there are a lot of Genesis theme framework users using the default black Genesis "G" Favicon that comes with the theme.

In other words, they don't change the Favicon to something more unique to their brand. See image below.

favicon_browser-1

Are you guilty of doing this yourself?

Sure, it's OK to leave the default Favicon as it is if you really, really want to, however, so many other people are doing exactly the same thing with their Genesis powered website. And, it just gives the impression that you really don't care about standing out.

But, if you want to know how to change this little icon that appears by your website address in the nav bar, read on -

Let's make it more like this!

my_favicon_image

6 Simple steps of adding a custom favicon to your Genesis child theme

Step one

Create a custom Favicon using some free online or desktop graphic design software. Either Canva or PhotoScape will do the job nicely. Or anything else you fancy using.

Once you're happy with your icon design, save it as PNG on your desktop.

I would suggest making your icon at least 180 x 180 pixels in size so that it not only looks great on desktop web browsers but also as a mobile touch icon.

Step two

Optimize the image by uploading it to TinyPNG and download the output.

We optimize the image so that it doesn't contribute to slow page load times.

Then, upload your final optimized Favicon image to your WordPress media file as normal by going to Media > Add New.

Step three

Copy the code below and past it into a new notepad or a desktop text editor file of your choice.

/** Adding custom Favicon */
add_filter( 'genesis_pre_load_favicon', 'custom_favicon' ); function custom_favicon( $favicon_url ) {
return 'http://myblog.com/image-name.png/';
}

Replace the example URL highlighted in red, with the URL of the image you just uploaded to your media folder on your WordPress site.

You can find the URL of an image in WordPress simply by going to Media and clicking on an image.

Step four

Go to Appearance > Editor and find your Functions.php file for the Genesis child theme you're using.

Since we're doing this in Genesis, just make sure it's the child theme and not the parent theme function.php file.

Important: You should always backup your Functions.php page before making any changes to it. The slightest mistake made to editing this page could take down your website.

The simplest way to backup your Functions.php file is by selecting all of the code contained in the Functions.php, copying it, then pasting it into a new notepad or text editor.

Save this to your desktop just in case you DO make a mistake and need to revert to it. (You may need to access your site via FTP or cPanel if you can't access the WP dashboard if your site does crash and burn)

Step five

Double check your Favicon code looks OK. Then, select all, copy and paste it inside your Functions.php file.

Somewhere just before the page ends, after the closing bracket symbol }, and in a new line as well. See image below for example.

code_sample_favicon

Step six

Hit save changes, clear your cache plugin if you're using one, and check that your new Favicon is working fine on all web browsers!

That's it, you're all done and dusted. You've just taken a small step towards personalizing your website.

I hope this was useful for you, Enjoy - Fabrizio.

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates
Read Commenting Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link