How to change my favicon
Once again, this is another hot question! All our themes come with a little butterfly for our favicon, and I realize most people don’t necessarily want that butterfly as their favicon so now we’ll show you how to change it!
So first, for those who have no idea what I’m talking about…
What is a favicon?
A favicon is the tiny icon next to your url when using your browser. It’s that little way to personalize your site and be more professional!
Here is a screenshot of some favicons for reference:
How do I create one?
Well, a favicon generally measures 32px X 32px. You’ll need to create your file at those dimensions and design your favicon. You’ll then need to save it as favicon.ico. You must use that exact file name. To change the file name, you can double click on the actual file name and erase your current extension and add .ico. If you get a pop up, select the “use .ico” message.
How do I install it on my site?
First, you’ll need to login to your site via FTP. If you don’t have access to your FTP dashboard, you can access it using a favorite FTP client like Filezilla for free. You should have received your FTP login credentials when you set up your hosting account. You will need this information to login.
Then you’ll want to navigate to wp-content>themes>your theme name>images and replace the existing favicon.ico file with your new file.
Once you do that you should be able to refresh your site and see the new image in the browser box! If you aren’t seeing it right away, don’t worry! Sometimes it takes just a bit to show up in all browsers!
Change your Favicon within your Theme Settings
With the latest update of WordPress, you can now change your favicon within your WordPress Dashboard! How? Super, duper simple! From the your dashboard you’ll navigate to APPEARANCE > CUSTOMIZE > SITE IDENTITY.
You’ll see a place to upload a site icon. This needs to be sized at 512 x 512 pixels. We always recommend that when you do this you save for web and devices if you are creating and saving through Photoshop. That’s going to ensure that your images is sharp and isn’t distorted in any browser.
Spread the word!
Okay, so other places are saying it’s a 16×16 image. Is there a reason your suggestion is larger? Also, I’m having a devil of a time actually saving as an .ico extesion, and I don’t know why!! What do you mean by double click on the actual file name…? I’ve tried saving it a couple of times, and can’t figure it out. Help deeply appreciated. ♥ Also, if I am running multiple blogs using the same theme, am I going to be able to use a different favicon for each, or am I stuck with using one for all of them…?
I’m not sure if you’ve found the solution yet, but I create my favicons using a favicon generator. You can find a free favicon generator here http://www.favicon.cc. Hope that helps!
I love this tutorial! Thank you so much for taking the time to post it. I just created a heart favicon and it was unbelievably simple, thanks to your instructions. (Although I thought he standard butterfly was cute, too.)
You’re so welcome!