How to Make a Favicon Image for a WordPress Website

Shares

 

Hi everyone in this tutorial I’m going to show you how to make a favicon image.

Now what were going to want to do, is I am going to point out to you first, that right here is our current favicon at the top, it looks like a blank sheet of paper, you may notice that this one looks a little different here and this is actually going to be the site we will use to create this, it will be logomakr.com. Thats L O G O M A K R.COM, there is no E in maker.

Free Logo Maker

When we get to the site it’s going to prompt us go through four steps, that are basically showing us the tools, the graphics, how to save them and that the sizing of the images here.

Now if we go to our site and we just go into the appearance and then we go to customize section, you will see that our site looks like this right now, when we go to it, but back here if we go and click on where it says site identity, there will be no logo image selected yet and there’ll be no site icon and the site icon is the favicon that goes up here at the top.

Wordpress Customize

So it says that it should be at least 512 pixels wide and tall.

So let’s say we want to make an image for this and I’m just going click where it says browse all logos here and I’m actually going to type in “camera”, just for this scenario and let’s add this icon here.

Now what we can do is go over here is make it 512 x 512 as the instruction said in the back end of the site in the appearance section, now we can simply click the corner of it and we can drag it to enlarge it.

And if you want to make this take up as much of the image as possible because it will look significantly smaller when it is in this little area here,if you want to change the colour while it is highlighted like this, while it is selected ,I will deselect it just to show you, we can click on this colour.

If we want it to be a different colour you can easily do that and change the colour of it within this here.

So if I’m happy with the colour, lets say I will leave it as this red, stands out quite a bit and I’m happy with how it looks and it’s 512 x 512, I can simply save it.

If I want to I could add text but I would say to avoid adding text for this image here, this favicon image because it’s just too small to do it.

Now if you wanted to and you’re happy with image we can save it and it will say save logo and here it says it is necessary to give credit to the authors and it says the author here camera by flat icon from free pic, and says click here to copy credits, you want to do that.

And next what we want to do is, within this area, you can click select images by where it says 512 pixels wide and tall on the site icon.

Almost every website will have that feature in it and if you haven’t already uploaded in this media library section, you will have to go and select files here and I’ll just go in my download section and find the image and I’ll add it.

If you want to make this a little more SEO friendly you could name this, say your website name here in the title and the old text here as well and I’ll just click select and now all click save and publish.

And you can see right here it is already updated from the white page to this camera icon.

Customize Tech Guides

Now if I go back over here and I refresh this page on the main website page, you will see that there is a camera.

Website Favicon

So that’s how you add a favicon to your website.

I hope this was helpful.

 

Pin It on Pinterest

Shares
Share This