Last updated: July 29, 2013 at 17:25 pm
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.
Note: In Genesis 2.0, the remove action is different:
The above code should be placed anywhere after this:
And before the following closing code (if it exists):
Install the Personal Favicon Plugin, which will enable you to specify the url of your favicon. Multisite users should Network Activate the plugin.
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.