How to Add a Favicon in WordPress | Site Icons

We are going to see How to Add a Favicon in WordPress in this tutorial. Favicon is also known as a website icon or a tab icon. It looks something like this:

These are all small images in your tabs. So when you keep opening a tab on your website in a browser, it looks cool when it has a nice image next to it.

Default Favicon

So you have created a new WordPress site and you wonder why your page tabs look so bleak. Why are there no images on top of them like almost all the other websites on the internet.

You know in a place like this:

You know that page of one of my sites looks dull with that weird looking default shape there. Let’s make that interesting, shall we?

Most of the themes come with the option of Site Identity. That’s a place from where you can change your website’s favicon.

We are going to see how to add a favicon using the Site Identity option.

NOTE: In some themes it is called something else for e.g. Site Title, Site Logo & Header, Tagline and Logo, etc.

Steps on How to Add a Favicon in WordPress

I am assuming you already have a favicon image with you that you wish to use it there. Generally preferred standard for Favicon image is 512 x 512.

Follow these simple steps on how to add a favicon in WordPress and you will be fine:

Step 1: Open your WordPress Dashboard page. In the left hand side menu bar click on Appearance > Customize.

It will take you to a place from where you can make countless adjustments related to your theme.

Step 2: On the left hand side you will have a vertical bar and on the right the way your website appears. Look for the option called Site Identity on the left.

Okay so Site Identity option for my theme is located in the General tab. I will just click on it.

It navigates to Site Identity.

Step 3: Click on Site identity and it will show the following:

Notice how this theme calls a favicon a Site Icon.

Step 4: Click on Select image button.

It will take you to the image selection page. Select the image you wish to choose as favicon or site icon. Once selected click on Select button.

Next screen might ask you to crop the image.

Step 5: Click on Skip Cropping button if you do not wish to crop it and wish to use it as is. Or you can crop it and then select crop image, entirely up to you.

I am going to click on Skip Cropping.

Publishing

On doing so you will notice that it begins to show in the screen like this:

However the changes have not been saved.

Step 6: In order for you to see the changes and make them actually reflect, click on Publish.

That’s it. Just click open your website on a different page, and you will see the favicon being reflected:

Cool, right?

Alternatively, or if you can’t customize your theme you can go for a plugin too. There are plenty of plugins available that could take care of this job.

You can search a Favicon plugin by simply typing “Favicon” in the search box after you have clicked on the Add New option available in Plugins.

Check out more cool WordPress tutorials on DITD.