Image editor

3 Steps to add a perfect favicon to your WordPress site

To add a professional looking favicon to your website is extremely easy and you can do it yourself. In this post, I will show you how to add a favicon to your site in less than 5 minutes.

Some websites don’t have a favicon, some have but it is looking unprofessional.

A nice looking favicon will make your site look professional and, it has other benefits!

Don’t forget to see best free SEO tools to check and improve your website speed!

What is a favicon anyway?

Favicon is an icon that is associated with your website. Normally, web browsers display favicons in three places, the:

  • URL in the address bar
  • website’s name in a list of bookmarks
  • page title (for browsers that have tabbed browsing)

The quickest way to check if a website/web page has a favicon is by looking at the browser tab when you have the website of interest open in your browser.

You will see an image (favicon) just next to the text on the browser tab:

Facebook favicon browser tab
Facebook favicon browser tab

Why is favicon important for a website?

The most important reason to have a favicon is that it plays an essential role in promoting your brand.

Just the same way your logo is important for branding, so also is favicon.

The primary difference I see here is that favicons have designated places they appear and interestingly, these are key locations to show off your brand identity.

How to add a favicon to your WordPress website

The steps here apply to even non-WordPress websites, the only difference may be step 3 which is just to upload the favicon to your website.

1. Resize your image:

Usually, WordPress recommends a favicon of dimensions 512 by 521 pixels. So the first thing you need to do is edit the image with any photo editing tool you have and make sure it is a square of 512px in length and 521px in width.

Favicon dimensions
Favicon dimensions

2. Give your favicon a transparent background

This is where some people fail to get it right. A professional looking favicon should not have bakcground colors (including a white background) that is not part of the intended brand identity.

So you want to make sure you have any background color removed, and here is how I quickly do it:

How to give the favicon a transparent background

Go to this website: lunapic, move your mouse over the option that says “Edit” then move down and click the option “Transparent Background“:

image editor
image editor

When the page loads, click the button that says “Choose a File” and select your favicon (the image from step 1). After the image is uploaded, click the colour you want to remove.:

Image editor
Image editor

Then the page will load the image again and you will notice that the colour has been removed:

Image editor
Image editor

Look below to see the button that says “Save” and click it to download the image.

Give the favicon a standard name

Although you can upload the image to WordPress in its current format (maybe .jpg or .png or…) and it still works, but favicon for your website should be a .ico file. All you have to do is rename the file to .ico.

Example:

Assuming the file name was favicon.png or favicon.jpg, rename it to favicon.ico

3. Upload your favicon

Now you should have a favicon with the recommended dimensions, transparent background and in the correct file format.

login to your WordPress admin dashboard. From the admin menu, move your mouse over “Appearance” and click “Customize”:

WordPress Admin menu
WordPress Admin menu

From theme customization options, locate and click the option named “Site Identity” (where this is located varies with WordPress themes but it is usually there).

Then scroll down to “Site Icon” and click to upload your new favicon:

WordPress customize theme
WordPress customize theme

Save the changes.

Congratulations! You now have a nice looking favicon. If you have any challenges or anything to say, please let me know in the comment box below. Thank you.

Leave a Comment

Your email address will not be published. Required fields are marked *