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 WordPress website.
As a user and fanatic of the Genesis Framework, I'm often asked the following question:
How do I add a custom Favicon to my Genesis child theme, without using a plugin?
Well, you'll be pleased to learn that the process is comparatively simple to do, and I'll show you how in just a moment.
Before we get started, I just want to share with you why I think it's essential to use a custom Favicon, if you have a website of any kind.
Whether you have a website that is built on WordPress or not, it's important to give your site a unique identity, especially if you're trying to build a personal brand.
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 (Affiliate link) users using the black Genesis "G" Favicon that comes as default with the theme.
In other words, they don't change the Favicon to something more unique to their brand. See image below.
Are you guilty of doing this too?
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 website. And, it just gives the impression that you really don't care about wanting to stand 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!
Create a custom Favicon using some free online or desktop graphic design software or app. 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 512 x 512 pixels in size so that it not only looks great on desktop web browsers but also as a mobile touch icon.
Optimize the image by uploading it to TinyPNG and download the output.
The reason why we do this is to optimize the image so that it loads quickly.
Then, upload your final optimized Favicon image to your WordPress media file as normal by going to Media > Add New.
Copy the code below and paste 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 'https://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. You'll see the Attachment Details, including the File URL.
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.
Necessary: You should always back up your Functions.php page before making any changes to it. Just one mistake or an incorrect character can take down your whole site.
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 your hosting's cPanel if you can't access the WP dashboard if your website does crash and burn)
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 the image below for an example.
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. You've just taken a small step towards personalizing your website or blog. Now that wasn't hard, was it?
Update: You can now add your Favicon easily by going to Appearance > Customize > Site Identity > Site Icon. See the image below.
I hope this was useful for you, Enjoy.
