How To Add A Favicon To Your Website

by Christa D. | Apr 27, 2020 | Blogging | 0 comments

As a newbie blogger, you might have already come across an article or a blogging checklist that recommends you to add a favicon to your website.

Well this might just be a minor thing but it actually has a BIG effect on how your blog looks and how others will perceive it.

So I do believe that this is one of the first things you should set-up prior to launching your blog.

Before I go through the details, first…

WHAT IS A FAVICON?

According to Wikipedia, Favicon, short for “Favorite Icon”, is a small icon associated to a website which is usually shown on the browser’s address bar and on the list of bookmarks.

To make things simple, here’s how it looks (check the encircled icons):

See how it gives the website a more professional and distinctive look?

That is what you would want to achieve as a newbie blogger.

Good news is it is very easy to make and set-up!

Just follow the steps below.

Affiliate Disclosure: This page contains affiliate links which means that if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you. See my full disclosure policy here.

…

ADD A FAVICON TO YOUR WEBSITE IN THREE SIMPLE STEPS

STEP 1: CREATING YOUR FAVICON

WHERE CAN I CREATE MY FAVICON?

Graphic designers probably use professional softwares such as Adobe Photoshop or Illustrator but for non-designers like me, I prefer Canva for all my templates and designs because it is very simple and easy to use.

The best thing is you can use it for FREE, although of course I would recommend you to upgrade to the pro version so you can gain access to premium features.

ARE THERE GUIDELINES I SHOULD FOLLOW?

There are a few things to remember when creating your favicon:

Ideal favicon size is 512 x 512 pixels. To do this on Canva, click Create a Design >> Custom Dimension >> then type your desired size.
Choose colors that match your brand.
If you are using more than one letter, make sure that it is big enough to read. Other bloggers prefer to use their logo as a favicon but this is only applicable if the text is still readable from afar. Remember, this is a teeny tiny icon so make the most out of it.

In my case, I used three bold letters for my favicon.

STEP 2: SAVING YOUR FAVICON

WHAT SHOULD I DO BEFORE I SAVE MY FAVICON?

When saving your favicon, remember to set a few things:

Save it as PNG.
Remember to save it with a transparent background so that only your icon will be seen and not the default background that comes with it. This is why I prefer Canva Pro as it allows you to do that in just one simple click like the one below.

Once you have downloaded your favicon then you are ready for the next step!

STEP 3: ADDING YOUR FAVICON TO WORDPRESS

Go to your WordPress Dashboard then hover on Appearance and click Customize.
Now depending on the theme that you are using, you can click Site Identity straight away from the menu or in my case, since I am using the Astra theme (free version), I have to go to Header before I can find Site Identity as shown below.

Next, you will find the Site Icon tab where you can upload your favicon. In my case I am just changing my favicon to match my new brand theme so I clicked on Change Image as shown on the screenshot below.