Change the default Genesis Favicon

Last updated: October 13, 2015 at 17:27 pm

As of WordPress 4.3, you can upload a 512×512 file to use for your favicon under Appearance > Customize > Site Identity.

A favicon, short for favorites icon, is a small image associated with your website that is typically displayed in the browser address bar, favorites menu, bookmarks menu, or on the browser tab of your web browser.

The default “G” favicon that comes with Genesis is easy to change.

Step 1: Create a favicon.ico file

Generally, favicons are 16×16 pixels and must be saved as a favicon.ico file. It must be named this exactly or the browser won’t recognize it. Because of the small dimensions, the design should be simple, and “iconic,” for lack of a better term. For instance, the Genesis “G” icon is simple, recognizable, and easy to see at a small size.

You can use the free image editor, like GIMP, to save the 16×16 image as a favicon.ico. In addition, several online tools are available to create your favicon.ico file:

• Dynamic Drive FavIcon Generator: Allows you to upload an image to generate a favicon
• favicon.cc: Allows you to build a favicon online or import an image

Step 2: Upload favicon.ico to your theme directory

The favicon.ico file is located in your child theme images directory. For example, the location of the favicon in the Agency Child Theme is /wp-content/themes/agency/images/favicon.ico. Use FTP to navigate to the child theme images directory and upload your new favicon.ico.

Using Favicons with WordPress MultiSite

The process to use a favicon for each site on a Multisite setup, that is using the same theme, is different.

To remove the default favicon from the theme(s), place the following code into your functions.php file.

remove_action('genesis_meta', 'genesis_load_favicon');  

Note: In Genesis 2.0, the remove action is different:

remove_action('wp_head', 'genesis_load_favicon');  

The above code should be placed anywhere after this:

require_once(TEMPLATEPATH.'/lib/init.php');

And before the following closing code (if it exists):

?>

Note: Browsers generally cache favicon files so you’ll need to clear your browser’s cache before the new favicon will be visible to you.