WordPress Change the Favicon on my Genesis Child Theme

screenshot of favicon I always like to change the favicon on my projects so that the little picture on the browser tab isn’t the standard ‘G’ that comes with the Genesis theme.

To do that I create (or have a graphics person create) a small 16×16 image and name it favicon.ico.  I would then upload the image to the public_html folder (root) of my website.

Just to be safe I would also upload the favicon.ico file to the /wp-content/themes/child-theme/images folder.  Then I would wait.  And wait… and wait…  Sometimes it would show up and sometimes it never did… or maybe I just got impatient and didn’t wait long enough.

I like things to happen when I change them.  I want to make sure it worked.  So, I searched for another solution to make SURE I had done it correctly.

I could finally get it to show up on my tab if I viewed the source and then clicked on the favicon url in the source which took me to just that image in my browser – the Genesis ‘G’. Then I could clear my cache by holding shift while I clicked on the refresh icon in my browser. That would change the Genesis ‘G’ to my favicon. Then when I refreshed my site page, my favicon would appear!

That works well for me, but, what about any of my visitors who had visited my site before? When they come back, they are not going to see my new, beautiful favicon. I don’t want to have to explain all that to them and make them jump through hoops just to see my beautiful new favicon. I want it to change automatically for them.

I finally found this blog which gave the me the answer I was looking for:

/** Remove favicon */
remove_action('genesis_meta', 'genesis_load_favicon');

add_action('genesis_meta', 'child_load_favicon');
function child_load_favicon() {
    echo '<link rel="Shortcut Icon" href="/favicon.ico?v=2" type="image/x-icon" />';

This code should go in the functions.php file in the child theme. I changed the href attribute in the link tag to work better for my site and I added the ?v=2 to the end of the favicon.ico link to cause the browser to refresh the favicon.

It worked! When I take the ?v=2 off the link, the favicon disappeared again, so I’ll leave the ?v=2 on for now. Not sure how all browsers work to update the favicons but this appeared to work in both firefox and chrome on my Mac. Let me know if you have more tips and insight on the favicon refresh issue.

UPDATE:  This doesn’t work for me anymore.  Apparently Genesis has changed how they handle the favicon.  I finally found this code which worked.

add_filter( 'genesis_pre_load_favicon', 'sp_favicon_filter' );
function sp_favicon_filter( $favicon_url ) {
 return '/favicon.ico';

Leave a Comment

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

Scroll to Top