What is a Favicon (and why you should design your own!)

When I started blogging and building websites, I kept hearing the word “favicon” and I wondered, what IS a favicon and do I need one?

A favicon is the little symbol or “picture” next to your website URL. It looks like this:

design your own favicon

Most large (and small) websites have favicons. Normally, the favicon is a logo, or it at least includes the colors/font to be a consistent extension of the website brand.

If you don’t have a favicon set up, when people land on your website, it looks unpolished, unfinished and even a little unprofessional!

NOT cute!

So now that we’ve answered “what is favicon?!” let’s get into designing one!

Designing your own favicon is SUPER easy and it will take you less than 5 minutes (I promise!)

So let’s get started and design a custom favicon to make your website stand out!

1. Select image size in Canva

This tutorial assumes you’re using WordPress and for optimum size+cropping, WordPress recommends a favicon size of 512 x 512.

From your Canva dashboard, create a new design using custom dimensions and make it 512 x 512 pixels.

design your own favicon canva

By the way, if you’re new to Canva, I have a tutorial for you here!

2. Design your favicon

So from here, it’s totally up to you what you choose to design! You can make your favicon initials in script-font, a symbol, a shape, or anything you want! Just remember, it can’t be too detailed because it’s going to be SUPER small!

Canva offers some amazing symbols and fonts to choose from, or you can check out other free websites like Pixabay, Pexels, or Unsplash.

Check out these resources for FREE blogging images + graphics!

Here are some examples to get your creative juices flowing:

Once you’re done designing, save your image as a PNG file.

3. Make the background transparent

This is a SUPER important step in making sure your favicon looks professional. If you don’t make your favicon transparent, it will have an ugly white box around it which looks unfinished and unpolished!

I found an amazing free tool for giving images a transparent background called Lunapic.

From the Lunapic homepage, under “edit a photo” click “browse” and upload your favicon.

After it’s uploaded, click “Edit” in the top menu and scroll down to “Transparent Background”.

what is a favicon

Click on the background of your image and, VOILA! It will instantly reload with a transparent background.

Next, go to “File” and “Save” saving your new transparent favicon as a PNG file once again.

4. Upload your favicon in WordPress

Now, it’s time for the last step! (I told you this would be SUPER fast!)

Once you’re signed into the admin section of your WordPress dashboard, click “Customize” along the top menu.

From there, click “Site Identity”.

design your own favicon canva

Scroll down to the “site icon” section and click “change image”. Upload your new favicon with the transparent background, hit save and you’re done!

design your own favicon canva

Now you can enjoy your new custom favicon and look extra professional to new visitors!

I hope this tutorial helped! Any questions or comments? Let me know below 🙂

Share the post

Share on facebook
Share on twitter
Share on pinterest

Free blog training 🎉

Want to learn exactly how you can start, monetize and scale a money-making blogging business?

Sign up for the FREE training and I’ll walk you through it step-by-step!



    Join our online community

    Come hang out in the Profitable Online Creators Facebook group with live weekly trainings on creating, launching, and scaling your programs and offers!

    © 2021 Liz St Pierre. All rights reserved. 

    home        about      terms      privacy policy