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:
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.
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:
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.:
Then the page will load the image again and you will notice that the colour has been removed:
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.
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”:
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:
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.