How to add a favicon icon to your WordPress site

How to add a favicon icon to your WordPress site

If you look up at your open browser tab, you will see a small icon to the left of the tab, like in the image below.
How to add a favicon to your wordpress site 11

 

This icon is called a favicon, favicon stands for "Favorites Icon" and it is used like a site identifier.

In this post I will show you how to add a favicon icon to your WordPress site.

 

Step 1. Create your Favicon Icon

First you need to create a Favicon, to do this go to

https://logomakr.com/

 

Logomakr is a free logo maker tool. When you go to the site you will be greeted by a video showing you how to use the tool. Watch the video.

create a favicon 1

 

Once you watch the video you will be give some more instructions showing you how to use the tool.
Click next on these.

create a favicon 2

create a favicon 3

create a favicon 4

 

There are lots of different direction you can go when creating your Favicon, here I am going to create a Favicon using one letter on a square back ground.

First I hover over the shapes option on the left and select square.

create a favicon 5

 

This gives me a square like below

create a favicon 6

 

Now I change the colour of the square by using the colour wheel in the bottom right.

create a favicon 7

 

I now have a white square

create a favicon 8

 

Within this square I will put my letter.

Go to options on the left and select text.

create a favicon 9

 

You will see the following box. I will insert my letter in this box.

create a favicon 10

 

Insert your letter in this box.

create a favicon 11

 

Change the colour of your letter by clicking the letter and changing the colour with the colour wheel in the bottom right.

create a favicon 12

 

Change the font of your letter by using the options in the top of your browser.

create a favicon 13

 

Centre your letter by dragging the letter around in the box until it looks centred.

create a favicon 14

 

Adjust the size of your square and letter by dragging the corner of each until you are happy with the sizes , the recommended size for a favicon is 512px X 512px but any square should do.

create a favicon 15

 

When you are happy with the size of your favicon, select crop in the bottom right

create a favicon 16

 

Crop your image, making sure it is 512px X 512px. Double click when you are happy with the size. (look to the top right for the dimensions)

create a favicon 17

When your image is cropped, click save in the top right

create a favicon 18

 

Your image should then start to download. Once downloaded you will be presented with the following box

create a favicon 20

 

Click the option to copy the credits. You should add this credit info somewhere on your site.

That’s it, you have created your logo. Go to your downloads folder and open it to see how it looks.

Now you need to add it to your word press site.

 

Step 2. Add your Favicon to your WordPress site

First you need to log in to the back end of your WordPress site.
Once logged in, look to the left of your dashboard and click on appearances.

How to add a favicon to your wordpress site 1

 

Click on customize

How to add a favicon to your wordpress site 2

 

What you see here will be theme dependent, I am using the Beaver Builder theme which gives me the view below. Whatever theme you are using you should see a Settings option here somewhere.

Click Settings

How to add a favicon to your wordpress site 3

 

Then click Site Identity

How to add a favicon to your wordpress site 4

 

You should see something like the following. Click the Select Image button at the bottom.

How to add a favicon to your wordpress site 5

 

You will be given the option to upload your favicon here. Drag and drop the image or browse to it and select it.

 

 

Once your image is uploaded you will see the following.

How to add a favicon to your wordpress site 8

 

Click the select button in the bottom right.

Crop the image if you need to

How to add a favicon to your wordpress site 9

 

When you are happy with the image click Crop Image in the bottom right.

You will be given a preview of how your new favicon will look.

How to add a favicon to your wordpress site 10

 

If you are happy click Save & Publish at the top.

That’s it. You’re good to go.

Check out your new favicon in the top of your browser tab.

How to add a favicon to your wordpress site 11

 

Leave a Comment