In this WordPress Video Tutorial for beginners, learn step by step how to change the wordpress favicon. It’s very simple to do and we’ll be showing how to change it in the file manager of the cpanel.
So in this video, what I’m going to show you is how to change your favicon in WordPress. And for those that don’t know what a favicon is, it’s that little thing at the top left of your browser so when you type in your URL it’s the image right next to it on the left. Right, so this is a very general overview of what we’re going to do is how do we actually make a favicon, how do we change it in WordPress and I want to show you an example of it. So how we’re going to make the favicon and what we’re actually going to be doing is just creating a basic image in an illustrator and then using the tool faviconer or you can simply just make one already in faviconer by itself and there’s many tools but these are just the ones kind of that WordPress recommends, faviconer, specifically.
And actually changing the favicon, what we’re going to do is, well for us, what we’re going to do is actually replace the favicon file through FTP and so actually just going to completely replace the favicon.ico file in our images section of our theme, and I’ll actually show you how to get there. Or you can use a plug in and it’s all in one. Favicon plug in is probably the best one but it’s very simple so that’s why I figured what to show you how to do it through FTP. So the first thing that I want to actually show you is what is the favicon so for those that don’t know, it’s that little thing in the top left right and right now since we’re using the Genesis theme, it’s just that default G favicon.
So, what we’re going to do first is just open up Illustrator, and to wish to have that Illustrator right here, all we’re going to do is, yeah, you can use any image you want. Just create some type of image, I’m not going to show you how to actually make the image and just save it on your desktop. So once you’ve actually created the image in Illustrator and saved it on your desktop, all you’re going to do is you’re going to go to this website, faviconer.com, F-A-V-I-C-O-N-E-R.com, and we’re just going to import an image and you just literally just drag-and-drop so we’re going to see. So you can only pick upload right there and you just choose a file. And you can also click “generate additional 32×30 favicon for retina display” and once you’ve done that, just click “upload.”
Once you actually upload your image, you’ll see something like this. And as you can see, the image isn’t all that pretty and that’s one thing that I want to mention about favicons is that because they’re so small, like they’re so small that you can really see the actual pixel, that’s 16×16 pixels. And so, having too much detail to a favicon is going to actually deter from the actual image. So even something like this, it’s probably too detailed even for a favicon. Right, we have this little line that goes on too it but it doesn’t really display on the 16×16 but 32×30, it does. But not everybody will have that option right now.
Everybody has a retina display. So you have to assume that this is what they’re going to see and they kind of give you a demo of what it’s going to look like up in the top left so that’s what it looks like right here. And what you can do is you can just edit things, right? So you use this eye dropper just like you would in Illustrator and you can collect the color and you can make it a different color, right? You see you can’t just change the things here and there and you can see if maybe you can make it look a little bit nicer. And all you’re going to do after that is download the favicon.
So once you’ve actually downloaded the favicon, what we’re going to do is now we’re going to go into our file manager, and I went ahead and just saved the favicon on my desktop, right. So let me just drag it out. So it’s right here, it’s this one right here I’ll just up to the side so we can just eventually upload it. And this is just the file manager and so you can also use something like, FTP, that’s perfectly fine as well. So what we’re going to do, this is the hostgator file manager, we’re going to go into our public HTML of our website, go into wp-content, go into themes, and then find Genesis.
So I’m going to re-open Genesis and then within images, we’ll have our favicon.ico and all we’re going to do is just replace this, right. So in order to replace it, you can just upload. And you have to remember that every time you replace it, it has to have the same name. So we’ll choose the file and we drag it and drop it in and it asks if we want to — if we want to replace it and it will just finish on its own.
So now our actual favicon is replaced, and if you want to actually see if it’s true you can just view it and it will open up and it will just view you the favicon that is currently uploaded. And one thing that I want to mention though is it does take some time especially for your browser to update the newest version of your favicon. In order to actually double check it, there’s tools that you can check it or you can also just delete your browser cache in your actual browser.
If you use Chrome or whatever it is, just delete it. Or you can just simply wait and overtime it’ll eventually change your favicon. So you can — there’s a number of ways that you can actually check. I just want to let you know that if you do check your website right now, it may or may not show the actual favicon that you just recently uploaded.