If you are using the Genesis Theme Framework, like we are, and don’t have a custom favicon you are missing out on a great branding opportunity for your site.
The Genesis theme’s default "G" favicon is to identify them and their brand, not you and yours. Fortunately, adding your own custom favorites icon is easy to do.
I wrote a tutorial recently on how to add a favicon to any WordPress site. It is a general primer that works with any theme. However, since Genesis uses child themes, the process is a bit unique, and, generally, much simpler.
Step 1 ~ Create a favicon
Favicons are typically 16 x 16 pixel-sized images that you can create with an image editor, like, GIMP, Photoshop, or Fireworks. However, we’ve found it is easier for some people to use an online favicon generator. A few good ones we’ve found are Favicon.cc, Favicon Generator and Gallery, and htmlkit.com.
Genesis uses a function called genesis_load_favicon that supports the use of image files named favicon.ico, favicon.png, and favicon.gif (including animated gifs). However, the only format that all modern browsers support is .ico. So, if you decide to create a favicon in one of the other formats, ALWAYS save it as an .ico file as well.
We recommend you go to the effort of making your own icons, but, if you only want a basic, generic one, check out the Icon Archive. They have thousands of free ones that you can use.
Step 2 ~ Upload your favicon to your theme’s image directory
Use your cPanel or an FTP program to upload your favicon(s) to your child theme’s image folder (wp-content/themes/your-theme/images/).
Step 3 ~ There is no step 3 . . . you’re done!
Now, do a "hard" refresh of any of your site’s pages in your browser and your new favorites icon should appear in your address bar.
Note: Clicking the Reload/Refresh button on your toolbar is usually insufficient to bypass your browser’s cache. Depending on your browser and operating system, you will need to use one of the methods below to bypass a single page’s cache without having to CLEAR all of your browser’s cache.
To "hard" refresh a page in most Windows and Linux browsers:
- Press Ctrl + F5, or
- Press Shift and click the Reload\Refresh button, or
- Press Ctrl and click the Reload\Refresh button
To "hard" refresh a page in most Mac browsers:
- Press Cmd + F5, or
- Press Cmd + R, or
- Press Cmd + Shift + R, or
- Press Cmd and click the Reload\Refresh button
For more detailed instructions for all browsers, see Wikipedia’s page on how to bypass your cache.
If all else fails, clear ALL of your browser’s cache and it should appear.
To get new favicons to work in WordPress MS, you need to add the following code to your functions.php file. Place it anywhere after this:
And before the following closing code (if it exists):
For versions of Genesis prior to 2.0, use this code:
For Genesis 2.0 and beyond, use this code:
Code Source: Dream Whisper Designs
More About Favicons
Favorites icons are not just for branding your main web pages. To learn more about:
- How to add them to your Admin Dashboard
- How to add them to your RSS feeds
- The plugin we recommend if you want to automate the whole process
- Additional tips on creating a custom favicon
See our article – How To Add A Favicon To Your WordPress Blog
If you want to stand out from the crowd and be instantly recognizable, you need to create a distinct brand for your site. Your brand should include unique graphics, logos, and favicons.
As we’ve shown, with Genesis themes adding these elements is very straight forward and easy to implement. You really have no excuses for not using a custom favicon on your site.
What Do You Think?
Have you created a custom favicon for your site? What tools did you find helpful in creating it? Let us know in the comments below.
Did you find this article helpful? If so, please share it!
- Daring Fireball: How to Create Retina-Caliber Favicons - Daring Fireball
- Jonathan T. Neal | Understand the Favicon
- Genesis 2.0 -- This WordPress Framework Manages To Impress ...
- Here's Why Genesis is the Foundation of any Smart WordPress Design - StudioPress
- Everything you always wanted to know about touch icons · Mathias Bynens
- Why Having a Favicon is Crucial for Every Blog, and How to Set It in ...
- 8 Reasons Why Many of My Clients Are Switching to Genesis ...
- A WordPress Theme Framework that Works: Genesis by StudioPress | Copyblogger
- Create the perfect favicon | Feature | .net magazine
- How to Quickly & Easily Change your Favicon in WordPress - myWPexpert