How To Add A Favicon To Your Website

by | 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):

what is a favicon

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.

HOW TO ADD A FAVICON TO YOUR WEBSITE

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 which I will then use to maintain this blog. 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.

how to make a 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.
how to save a favicon

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.
how to add a favicon
  • 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.
how to add a favicon
  • Once you have uploaded your favicon, click Publish.

There you have it! Easy right? 

I hope you found this tutorial helpful and if you have any other suggestions or questions, feel free to comment below!

Related Posts:

0 0 votes
Article Rating

MY FAVORITE DEALS

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments

Pin It on Pinterest

Share This