Update
The code examples provided in this post were partially inaccurate. Please refer to the comments below to see a more accurate example of how to accomplish this.
A few versions back, JetPack added a nice new module that allows site owners to easily set up their own “Site Icon” (generally known as a favicon). However, recently, I noticed an issue when trying to use that new module on a site that was running a custom Genesis child theme. Genesis automatically outputs a generic favicon (most people recommend replacing the favicon.ico file with a custom one) in the head of the page. In this instance, the Genesis favicon was overriding the JetPack Site Icon, but only in some circumstances.
When I viewed the source of the page, I discovered why this was happening: both JetPack and Genesis were injecting their favicon code into the head of the page; in some instances, the first favicon call was being obeyed, in others, the second call was being obeyed by the browser.
There is a simple fix for this issue, though. Within a plugin or your child theme, you can insert code similar to the following to allow JetPack to take full control of your favicon, and stop Genesis from outputting its code.
In this Gist, we’re doing two things:
- We are hooking into the `genesis_pre_load_favicon` filter. If anything other than boolean `false` is returned by this filter, Genesis bails on the `genesis_load_favicon` process.
- We’re checking to see if the `jetpack_has_site_icon()` function exists and, if it does, we’re checking to see if a Site Icon has been set for this site using JetPack. If the function doesn’t exist (meaning that JetPack isn’t installed) or if the `jetpack_has_site_icon()` function returns false (meaning that the Site Icon module is not enabled or a Site Icon has not been set using that module), then we return `false`, allowing Genesis to continue loading its default favicon code. However, if the JetPack plugin is installed, the Site Icon module is enabled, and the site owner has set a Site Icon using that module, we’ll return `true`, stopping Genesis from loading its default favicon.
Thanks for the post–this helped me find my way. I had to do a little more for it to work though. Per the example here: http://my.studiopress.com/snippets/images/#custom-favicon you should return the url of the favicon, i.e. return jetpack_site_icon_url(). See https://gist.github.com/mboldt/1c4a5387bc98853923c0 for my full solution.
Looking at the Genesis code again, you’re right. Thank you very much for pointing this out. Though, I think even doing it that way will potentially result in you finding the same icon output twice in the `
` of your page.It actually looks as though there are two better ways to do this:
add_filter( 'genesis_favicon_url', 'mytheme_uses_jetpack_site_icon' );
function mytheme_uses_jetpack_site_icon( $favicon ) {
if ( function_exists( 'jetpack_has_site_icon' ) && jetpack_has_site_icon() ) {
return false;
}
return $favicon;
}
add_filter( 'site_icon_has_favicon', function() { return true; } );
Just make sure you use that in conjunction with the code you’ve linked above (the code that tells Genesis to use the JetPack site icon URL for the favicon), otherwise you’ll still end up with the default Genesis favicon. Also, the code excerpt I just showed will only work in more recent versions of PHP. If you’re using an older version of PHP, you may need to write an actual function to return `true` instead of using an inline/anonymous function like that.
Again, thanks for the correction. I’m glad you were able to get things working on your site, despite the inaccuracy of my example.