Categories
How To

Multisite Favicons

More fun with Favicons. Now we’re playing with Multisite.

One of the challenges with WordPress Multisite is that everything is on the same install. This means something that is rather trivial, like a favicon, becomes exceptionally complex and tiresome.

On a normal site, when I want to make a favicon, I just toss the file into my main HTML folder, next to that .htaccess file, and I’m done. Now, for me it’s a bit of an extra step because I use StudioPress’ Genesis theme, and it applies its own favicon. It’s probably the only thing about Genesis that makes me annoyed, though it’s right next to when my host does that for me. Still, there’s a trick with Genesis.

Because of Genesis Because of Genesis

Genesis is my parent theme, and it defines my favicon. So I have to delete its and put in mine:

// No, you may not have your favicon
remove_action('genesis_meta', 'genesis_load_favicon');

add_filter( 'genesis_pre_load_favicon', 'halfelf_favicon_filter' );
function halfelf_favicon_filter( $favicon_url ) {
	return 'https://halfelf.org/code/images/favicons/halfelf.ico';
}

And it’s that simple.

But I’m talking about Multisite, and I want to have a different favicon per site, I end up facing a new challenge.

Top ↑

Because of Genesis and Multisite Because of Genesis and Multisite

I still need to tell Genesis to shove it, but then I need to check what site I’m on and call the right favicon per site and this works very well. I’m using it today (you can see the code on that other link). But what if there was another option? What if I didn’t have to code it? Because the real problem with that code is I have to do it! If someone wants a new site to have their own favicon, I have to go in and add it to my mu-plugin, save it, commit it, and push it. Ew.

Top ↑

Jetpack Site Icons Jetpack Site Icons

Jetpack has a newish feature called Site Icon. With that module activated, I can allow each site to upload their own site icon and it will make a mobile icon too where I won’t have to.

Uploading my Space Invader

For a Multisite running Jetpack auto-activated on all sites, this is perfect. And yes, I do that because it saves me a headache of having to set it up later. I allow all sites to connect on their own, but I can also control all that from the network admin.

So what does that old code look like now?

Top ↑

With Genesis and Jetpack With Genesis and Jetpack

Now my code is simple. For everyone, I kill the default favicon, and then I set my own:

// No, you may not have your favicon
remove_action('genesis_meta', 'genesis_load_favicon');

global $blog_id;

add_filter( 'genesis_pre_load_favicon', 'example_favicon_filter' );
function ipstenu_favicon_filter( $favicon_url ) {
	return 'http://example.com/images/favicons/example.ico';
}

And the best part is if I set a site icon in Jetpack, it uses that instead.

Best of both worlds.

One reply on “Multisite Favicons”

Comments are closed.