In my post, I show you step by step how to create a favicon for free on Canva and then how to upload your favicon to your WordPress website.
Once uploaded, your favicon appears in website browser tabs like this.
Creating a favicon in Canva takes a few minutes. Uploading it to your WordPress blog is super easy. I show how to design your free favicon and then upload it to your site, step by step.
When I started blogging, I did not know how to get the little image to appear in the browser tab for my website. By the end of my post, you will have a favicon for your WordPress site.
Let’s start creating a favicon!
- What is a favicon image?
- Create a free favicon on Canva.com
- How to download your favicon from Canva
- How to upload a favicon to your WordPress site
- Crop your favicon
- How to create a favicon and upload it to WordPress video tutorial
- Conclusion
What is a favicon image?
A favicon image is a small image that represents your website. You mostly see them in browser tabs.
If you look at your open browser tabs now, you will see different images in each one of the tabs. Those images are favicons.
If you are reading this post, then you probably don’t have a favicon for your site yet.
A favicon is very small, so when designing yours, keep this in mind. You don’t want too much detail or text, your visitors won’t be able to see it.
Look at the examples of favicons in my introduction. Facebook and Google use one letter of their brand, and twitter has a their logo image.
Let’s create a favicon for your site.
Create a free favicon on Canva.com
First, head over to Canva.com (*paid link). Before you can use Canva to create a favicon, you need to open a free account.
On WordPress, the favicon image size is 512*512 pixels. To create an image on Canva that size, use the ‘Custom dimensions’ feature. Type 512 and 512 into the boxes as per my screenshot, then click on the ‘Create new design’ link.
Now you can create a favicon for your site. The image must be within the white canvas.
If you want to use your site logo for your favicon, use the ‘Uploads’ option on the menu on the left.
To design a new favicon for your WordPress site, use the options in the menu on the left.
For example, to use a letter for your favicon, select the ‘Text’ option. In my example, I clicked on ‘Add a heading’ and typed ‘F’.
Your design must fit into the white square. You can click on any section to edit. For example, if you want to change the background color, click anywhere on the white background, and a color icon appears on the top.
Click on the icon and select your color. I am going to change my background to blue. If you have a color code, type or paste that into the box at the top.
To get HTML color codes to paste into this box, go to https://htmlcolorcodes.com.
To change the font, size, or color of your letter, click anywhere on the letter, and options appear along the top. I am going to change my ‘F’ to yellow and change the font.
When you have finished editing, it is time to download your favicon to your computer.
How to download your favicon from Canva
Canva allows you to download your favicon for free. To download, click on ‘Publish’ from the drop-down menu, then select ‘Download’.
On the next option window, select ‘Download’.
If you want your favicon to have a transparent background, you need to upgrade your account.
Once you select ‘Download’, your image is saved to your computer.
Next, it is time to upload your favicon to your WordPress blog.
How to upload a favicon to your WordPress site
Return to your WordPress admin dashboard, hover your mouse over ‘Appearance’, and select ‘Customise’.
Once you are in ‘Customize’, look for ‘Site Identity’ on the menu on the left.
Once in ‘Site Identity’, look for ‘Favicon’ or ‘Site Icon’.
On this theme, I’m reminded the favicon should be at least 512*512 pixels.
When you create your favicon in Canva, use the ‘Custom Dimensions’ option and set it to 512 by 512.
Next, select ‘Change image’, to go to your Media Library. Once in your Media Library, select ‘Upload Files’.
To upload your favicon, click on ‘Select Files’, and choose the favicon image you created on Canva from your computer.
Once you select and upload your image, you return to your Media Library.
On the right, add text to the ‘Title’ and the ‘Alt text’ section. Once completed, click on the ‘Select’ link on the bottom right.
The next page is for cropping your image.
Our image is 512*512 pixels, therefore, we can skip cropping. On the right, you have a preview of what your favicon will look like in a browser tab.
To continue, select ‘Skip Cropping’ and you have a favicon set for your WordPress blog.
Publishing your favicon to your website
There is one last action you must do to make your favicon appear on your WordPress website, click on ‘Publish’. Now your site has a favicon.
To check your favicon, go to your website in any browser and you will see it in the browser tab. If you don’t see it, try clearing your browser cache.
How to create a favicon and upload it to WordPress video tutorial
Conclusion
Creating a favicon on Canva takes just a few minutes, and it is free. You can create as many favicons as you like until you get one that you want to use.
Uploading your favicon to WordPress is also easy. Go into ‘Customise’ on your main WordPress menu and look for ‘Site Identity’. Upload your favicon image under the section called ‘Site Icon’ or ‘Favicon’. Publish your changes and your favicon is live.
After you upload your image to your Media Library, don’t forget to add a title and alternative text to your image. It is important for SEO. For a detailed step by step guide, check out my ‘How to add alt text to your WordPress images‘ post.
To start designing your free favicon on Canva, head over to their homepage at https://www.canva.com/login (*Paid link). This is an affiliate link, which means I get a commission if you purchase their premium option at no extra cost to you.
Before you go to Canva, may I ask for one minute of your time to leave me a comment? Did I help you with my post? Would you like me to go into more detail about something? I look forward to reading your feedback.
