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:
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!
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.
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”.
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”.
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!
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 🙂