Changing A Favicon in WordPress: An Easy Guide to Favicon Uploads

That browser tab image you noticed, it’s called a favicon. If you built your site using WordPress then chances are you’re not happy with yours. I know I’m not with happy with mine…

Favicon-Examples

That’s right – my favicon is a giant G. It’s a G because I used a genesis template in StudioPress to build my site, which was awesome, but came packaged with a pesky little favicon that has absolutely nothing to do with me (the letter G isn’t even in my name). We all know how important consistent branding is in marketing, and these little details matter.

When I set out to change a favicon for the first time all I found in the search results were long help threads and articles that assumed I had been building sites for years. They were too specific, too technical, or too outdated to help. So here it is, for those of you who want a simple and straightforward guide to change a favicon in WordPress.

1. Create the image. You’re not the next Picasso – keep it simple. Stick to your logo, initials, or a clear image that typically represents your brand. A nice square is all you need, and I created mine with Pixlr.

Favicon-Pixlr

2. Make it a fav.icon. There are a ton of generators that will help take your image from any file type to the correct .ico file with the proper dimensions for a favicon. I used this favicon generator. Just upload your image, and download the file. TIP – once you download the file put it somewhere relevant, you don’t want it to be lost in your downloads folder. Don’t change the name – it should always be favicon.ico.

3. Get your FTP on. If you have a way you access your FTP then great, but if the words FTP mean nothing to you, then use FileZilla. It’s SUPER simple to navigate, and with it you’ll have your new favicon up in no time. With an FTP you’re transferring files from your computer to your site (hence the name File Transfer Protocol).

4. Replace the old with the new. After you install FileZilla, connect to your site.

Connecting-to-Filezilla

In the left hand local side of FileZilla, have your favicon.ico ready to go. In the right hand side, find the favicon file on your site. It’s going to be under your WordPress theme file, and if you have a parent theme like Genesis it will be in two places. There will be one favicon.ico in your Genesis parent theme folder, and one your current website’s theme folder. It’s under images in both cases and should be easy to find.

Filezilla-Locate-Favicon

Once you have your favicon.ico files located, simply drag your version from the left, to your website on the right. You’ll want to overwrite the old file. AGAIN be sure to overwrite the favicon in both the Genesis parent image file (or whatever parent theme you’re using if you’re using one), and the image file in your current theme.

Overwrite-Old-Favicon

And there you have it! FileZilla is open source, so it might take a few hours for you to see the changes. If it take’s more than 24 hours, you probably didn’t replace the correct favicon.ico file. Just make sure you view all the favicon images in your theme and as long is it’s your logo – you should be good to go!