Please Change Your Genesis Favicon

Standard

I love the Genesis framework* for WordPress. It is an amazing tool for speeding up the development process, and I even use it on my personal site.

Its wide acceptance across the WordPress world is unfortunately highlighted by the proliferation of Genesis favicons on these sites.

The Genesis Favicon is a black square or circle with a white capital “G” in it. It is a dead giveaway that you’re running your site on Genesis.

If you’re developing custom sites for your clients, you probably don’t want that visible. Your client would probably prefer to have their own branding in their favicon.

The fix for this is pretty simple, thanks to the hooks that Genesis offers.

What is a Favicon?

A favicon is that little square icon that appears in your browser window (or tab). It’s actually not a typical image, but an .ico file type.

The black circle in this browser tab is an example of a Genesis favicon.

The black circle in this browser tab is an example of a Genesis favicon.

To create your own favicon, create a square logo image with your brand of any size larger than 16x16px (you can even use transparent .pngs). Then, go to a site like favicon-generator.org and convert it to an .ico.

Including Your Custom Favicon in a Genesis Child Theme

Typically, this file is named “favicon.ico,” but you can call it whatever you want. The name “favicon.ico” is used in my code sample, so you may have to adjust that as needed.

Add your favicon to your Genesis Child theme’s directory, and add the following code to your child theme’s functions.php.

Note: Browsers are pretty stingy about caching these favicons. This means that you’ll need to open your site in a private/incognito window to see the changes take effect. New visitors to your site won’t need to do this.

<?php
/**
* Add custom Genesis favicon
*
* Dude, replace the default Genesis favicon so you don't look like a n00b.
* Create your custom favicon.ico and place it in your child theme's directory.
* Add this code to your child theme's functions.php
*
* Images can be converted to the .ico format here: http://www.favicon-generator.org/
*
* @author John Regan (john@johnregan3.com)
* @filter genesis_pre_load_favicon
* @uses get_stylesheet_directory_uri
* @param string Default Genesis favicon URL
* @return string Custom favicon URL
*/
add_filter( 'genesis_pre_load_favicon', 'my_custom_favicon' );
function my_custom_favicon( $favicon_url ) {
return get_stylesheet_directory() . '/favicon.ico';
}

*Not an affiliate link