Replace WordPress default favicon – and add a full package of icons for mobile and desktop

By Dave Kuhar | October 16, 2014 |

There’s a really great favicon generator out there that will take your icon and turn it into every file size and type you need for a full range of  icons for mobile devices, desktops, and even a Windows tile. Prepare your artwork at least 260px square (transparent PNGs work great), and head over to RealFaviconGenerator.net. You’ll get a zip file with a full package ready to go, and they’ll even offer the HTML you need to put into the <head> of your documents. Because we’re talking about WordPress here, you have to change their default path like this:

favicon-generator-path

I’m a big fan of people who save me time.

Copy/paste this code and drop it in the field you see there:

You’re going to put the resulting code into your functions.php file like this:

In the code above, line 18 is the one that dumps the Genesis G favicon that plagues 90% of Genesis sites. I swear I’m not making that statistic up.

In your child theme folder, inside the images directory, create another folder for the favicons (I called mine “favicon-package” above) and upload the images there. You could just dump them loose in your images folder, but I like to keep things organized.

In addition to choosing your file path, this tool also allows you to select your compression and scaling settings – with previews of each! – and choose the App name that will be displayed when a user adds an icon for your site or app to their smartphone screen. All in all, a very slick tool and one that saves a ton of time.

Posted in Genesis, Snippets, WordPress

2 Comments

  1. AaronJ on September 6, 2015 at 7:36 pm

    This is great! Thanks for the favicon information.



    • Dave Kuhar on September 7, 2015 at 2:30 pm

      We’re glad it helped!