How to Change the Favicon in a Genesis WordPress Theme

Changing the default Favicon on your Genesis powered WordPress website is an important step to help with your branding.

The Genesis framework and all child themes show the default Genesis favicon after installation. Changing the default favicon to your own is easy and only takes 2 mins.

Skip to How to Change the favicon

What is a favicon?

A favicon is used to make your site recognizable. It’s simply used for branding purposes and is displayed as a small icon in your browser window.

Here you can see the Net Wealth Strategies favicon and the one from StudioPress.

Custom favicons

Another place where favicons are displayed is next to all bookmarks saved both in users’ local web browsers, on the desktop as well as in online tools like Delicious.

Why bother having a favicon?

A favicon’s main purpose is to brand your website.

These days, people tend to browse many sites at once by using a number of tabs (which every modern browser supports). Each tab gets a title and an image displayed to the left of the title.

If you have a favicon set, then this is where it’ll be displayed. If you don’t have one then you’ll see a standard placeholder image like the one below.

Blank favicon

This makes favicons great for visually distinguishing your site from all the other ones. Quite simply, if you want to provide a way for your readers to be able to identify your site in a blink of an eye, favicons provide such a way.

How to create a quality favicon

Favicons themselves are not complicated at all.

The most intuitive way to build a nice favicon is to take your site’s logo and simply convert it to an .ico file using a graphics app.

However, if your logo is too complex, you might need to get a little more creative. Like for example, take the first letter of your site’s name and turn it into a favicon.

When it comes to the actual process of preparing the icon, modern image processing apps have the possibility to save your graphics as .ico files, or you can use a free online favicon generator. Make sure check the 32×32 and 48×48 options when creating the favicon. This will make the favicon file-size a little larger, but it’s worth it.

Free online Favicon Generator

How to change the favicon in Genesis

If you are reading this article, then I’m sure your website still has the default Genesis favicon as shown below.

Default Genesis favicon

There a a number of WordPress plugins that you can use to upload your favicon, but I recommend that you do not use one. For such a simple problem, it’s not required that you add bloat to your WordPress installation with yet another plugin that you have to keep updated.

You could also add some code to your child theme… but that’s not required either.

The easiest way is to upload your favicon into three locations manually using FTP or cPanel (overwriting the existing favicon.ico file in each location):

Upload to the root directory of your website
```
.../public-html/favicon.ico
```
Upload to the Genesis Framework images directory:
```
.../wp-content/themes/genesis/images/favicon.ico
```
Upload to the Genesis Child Theme images directory (replace “child” with the name of your child theme. e.g. “eleven40-pro”):
```
.../wp-content/themes/child/images/favicon.ico
```

After you have uploaded your favicon to these locations, you will need to clear your browser cache so you can view your new favicon in the browser.

Favicon upload complete!

Some browsers are stubborn and still cache favicons for a day or so… just be patient… clear the cache and wait a few hours if necessary.