How to Add a Favicon to your WordPress site- 2 Simple ways to do it

Disclosure- Hello there! Before you get started just wanted to be transparent and let you know that Blogging Unplugged is a blog that makes most of its income from affiliate commissions meaning some of the links on this page are affiliate links and if you purchase a product using our link we will make a small commission. Also, the product purchased will not cost you anything extra and in some cases you might get a decent discount using our links. Thank You for listening and Have a good day.

How to Add a Favicon to your WordPress site

When it comes to running an online business, branding matters and there are a few elements on your site that you have to configure to improve it. Below we have listed a few of them

• Logo
• Favicon
• Title
• Tagline

Most of the bloggers and webmasters are familiar with the terms logo, title and tagline. However, when it comes to favicon they have a little to no idea.

And that is why while setting up their blog or website this setting is often missed.

In case you are wondering what exactly is a favicon then let me tell you, it is a small icon that you see on the browser tab when you visit any web page.

This icon plays a crucial role in improving the branding and user experience of your website as it helps users easily identify your site on a browser when multiple sites are opened.

And because of this we have included it in our list of essential settings to do after installing WordPress.

In case you have just started your blog then this tutorial will help you set it up for success.

Having said that,

It is important to know that favicon is often confused with the logo of the site. Although these elements are very similar yet they are very different that each other.

For instance, favicon is just the icon or the symbol that represents your site while a logo can be a combination of this symbol, title and tagline.

And in some cases it can be just fancy text.

In case you are wondering if you can create a favicon easily then let me tell you, it can be easily created with the help of a free tool known as Canva and we will be covering this topic a little later in this tutorial.

As this tutorial is about adding a favicon on your WordPress site, it is important to know WordPress lets you do this easily with just a few clicks and below are some of the topics we have covered.

Before we dive into this tutorial, it is important to know that we have created a checklist of essential WordPress settings that will help get you started on the right track if you are just starting out. And you can download it for free by subscribing below

Note- If you are starting out and looking for someone to set up your WordPress blog then feel free to check our WordPress installation and Blog Set up service.

What is a Favicon and its importance

As mentioned above, Favicon is a small icon that you see on the browser tab when you visit a website.

This icon helps differentiate your site from the other when multiple tabs are opened in a browser improving the user experience and branding.

To understand this lets take an example where you are searching the web for some information and are working on multiple tabs with different websites opened such as Facebook, YouTube, Twitter and Quora.

In this scenario,

• If you want to visit Facebook then you need to look for the alphabet f on the browser tab.
• For Twitter you need to look for the blue bird.
• To visit YouTube you need to search for the red and white play button.
• For Quora its the single letter Q in the browser tab.

It is important to know that when you think about any of these icons the first thing that comes to mind if the brand name or the site name.

This means your brain automatically associates the brand names with their corresponding icons as you see them so frequently. And now when you see them anywhere you can easily identify them.

Similarly, if your site has a favicon then people will relate your brand to it and with time you will see an improvement in branding as the users will easily identify/ distinguish your site from the others.

On the contrary, if you do not have a favicon then this space is often occupied by the

• WordPress logo

• Or at times the WordPress theme you have installed

Before we move forward, it is important to keep in mind that favicon is located at a place that can’t be missed by the users. Hence, your must utilize it from Day 1 to spread awareness about your brand.

Also, if someone has saved your site on their mobile device or in other words bookmarked it then this favicon / site icon will help users identify your site over others easily.

Now that you understand the important of a site icon, below are some points to keep in mind before uploading it to your WordPress site.

• First things first, the dimensions and the aspect ratio of the site icon has to be correct and that is 512 x 512 px and 1 : 1 respectively.

At times we have seen bloggers upload images of aspect ratio other that the one mentioned above and it leads to favicon not appearing the way you want it to.

• Mostly favicons are icons that are associated with your brand. For example, for Facebook its the letter f, for Twitter its the blue bird and for Blogging Unplugged its a hand gesture suggesting number 1 and click.

All these examples suggest that you need a symbol that is associated / related to your brand and has to be unique.

• These days we are seeing more and more bloggers use their own pictures or short form of brand name as the favicon and using these is perfectly fine as long as your audience relates to it or identifies it.
• Make sure to use the color of your brand when creating the site icon as it helps with branding and better identification.
• Do not use any copyrighted stuff associated with major brands as it can lead to some serious problems.

Having said that,

While we are on the topic of creating a site icon, the next topic we are going to discuss is

How to create a favicon for your WordPress site

As mentioned above, creating a favicon for your WordPress blog is pretty simple and you can do it by using a graphic design tool like Canva.

Canva is a freemium online graphic design tool that lets you create any type of graphics for your business with just a few clicks.

Below are some of the graphics that it lets you create

And more. See the complete list here.

As Canva is tool that is built keeping in mind the ease of use and user experience, it comes with a huge template library that lets you speed up the design process.

We have been using this tool for around 4 years now and highly recommend using it.

Canva being a freemium tool is available in both free and premium version. And for this tutorial we will be using the free version.

However, if you are looking to buy the premium subscription and wondering about the pricing then let me tell you it comes at a pocket friendly price of $9.99/mo and includes features like

• 75+ million premium stock photos, videos, audio and graphics
• 420,000+ free templates with new designs daily
• Create 1 Brand Kit and upload your own fonts and logos
• Unlimited use of Background Remover
• Resize designs infinitely with Magic Resize
• Save designs as templates for your team to use
• 100GB of cloud storage
• Schedule social media content to 8 platforms

And more. See all the Canva Pro features here.

Now that you are familiar with the Canva and its features, its time we create a free account on it.

To create a free account on Canva the first thing you have to do is visit canva.com and click the Sign up button on top.

On clicking Signup, a popup will appear which will show you all the services that you can use to create an account on Canva.

Select a preferred service and proceed with the signup process.

Once you have create an account, it will take you to the Canva dashboard where you will see all the different graphics you can create using this tool.

Here you need to click Custom Dimensions on the top right and then enter the values 512 x 512 px in the box that appears.

When you do this Canva will create a blank canvas for you.

Once it generates the blank canvas, on the left you will have all the templates that you can use. Also, you will see the options to add images, videos, audio, text and more.

As mentioned before, a favicon is generally a symbol or a graphic associated with your brand and following up on our last tutorial on how to add logo in WordPress, we will select the same graphic.

To find a graphic in Canva, you need to navigate to Elements and then search for it using the search box. Once found, you need to click on it to add it to the blank canvas.

Once you are done adding the graphic, you will notice that it lets you resize and change the colors depending on your requirements.

Here we will recommend using colors that are aligned with your brand.

In case you want to add text to the favicon then you can do that by clicking on text in the sidebar and then select a size or a template.

As you can see, Canva lets you select the size and type of font and also lets you change the colors, alignment and more.

You can edit the text based on your requirement.

Once done you need to change the file name and download it using the option on top.

And that’s it you have created favicon for your WordPress site using Canva.

How to add a Favicon to your WordPress site

As mentioned before, WordPress lets you add the site icon to your site easily and you can do this in 2 ways

• Customization settings
• Elementor

In this tutorial we have discussed both these methods

How to change a favicon in a WordPress site

Now that you know how to add site icon in WordPress using both customization settings and Elementor.

The next thing we will be discussing is how to change it.

WordPress being a user friendly CMS allows you to change the site icon with just a few clicks.

For this the first thing you have to do is go to your WordPress dashboard and then click Appearance and Customize.

Doing this will take you to the theme customization menu in WordPress where you need to look for site identity.

Once you find this setting you need to click it and it will show you the option to change the favicon.

Here you will have to click Change Image and it will take you to the Media Library where you can either upload a new site icon or select an existing one.

Once uploaded you need to click Select in the bottom right of the screen and it will show you the option to crop if the image is not of the ideal aspect ratio or dimensions.

Else it will take you back to Site Identity where you will be able to see a preview of the site icon.

If everything is looking as expected all you have to do is click Publish to save the changes you have made.

And that’s it you have successfully changed the site icon of your WordPress site.

How to delete favicon of your WordPress site

Deleting the site icon in WordPress is pretty similar to changing it and for this the first step is to navigate to Customization in WordPress and then select Site Identity.

When you click Site Identity, it will show you the option to delete the site icon.

Here you will have to click Remove and then Publish to delete the site icon.

And that’s it you have successfully removed the site icon from your WordPress blog or website.

Having said that,

I hope you will find this tutorial helpful and are able to easily add a favicon to your WordPress site.

In case you have any queries feel free to reach out via the comment section and we will be happy to help. Also, don’t forget to share this article with your friends on social media.

To stay up to date with our content feel free to subscribe to our newsletter, join our Facebook group and follow us on social media.