Quick Tip: Avoiding Conflicting Favicons With Genesis & JetPack

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.

See the gist on github.

In this Gist, we’re doing two things:

1. 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.
2. 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.