How To Create a Favicon In Canva For WordPress Tutorial

In my post, I show you how to create a favicon using Canva for your WordPress blog, step by step.

A favicon appears in website browsers tabs. You can create a free favicon for your website using Canva.

This is a favicon

I also show you how to upload your favicon to your WordPress blog.

Let’s begin.

Step One – Create a Free Favicon On Canva.com

First, go to Canva.com (*paid link) and sign up for a free account. You can sign up with an email address, Google, or Facebook.

Canva.com

Once you are signed in, select the ‘Custom Size’ link on the right.

Custom size

On WordPress, the favicon image size is 512*512 pixels. Type 512 and 512 into the boxes, then click on the ‘Create new design’ link.

Create new design

A new browser tab opens with a blank canvas for you to start designing your favicon.

Blank canvas

Should you have an image prepared on your computer, you can use the ‘Uploads’ link.

Upload image to Canva

Then add the image to your canvas to edit.

Upload image

Ensure your image fills the white canvas.

Fill canvas

Create a New Favicon

Alternatively, you can create a new favicon for your WordPress site.

For example, to create a simple one-letter favicon, click the ‘Text’ link. Then select the ‘Add a heading’ link and type your letter. You can increase the letter size by dragging the borderlines.

Create a favicon on Canva

To change the background colour, click anywhere on the white background, then select the colour icon.

Change background color option

From the menu, select your colour. Choose a colour from the list, or enter a colour code.

Change the background color

To get HTML colour codes, go to https://htmlcolorcodes.com.

HTML color codes

To change the font, size, or colour of your letter. Click anywhere on your letter, and a toolbar appears. Some of the fonts are only available to paid customers.

Edit your favicon in Canva

Once you have finished editing, download your favicon to your computer.

Step Two – Download your WordPress favicon from Canva.

Canva allows you to download your favicon for free. To download, click on ‘Publish’, then select ‘Download’.

Download your favicon

On the next option window, select ‘Download’.

Select download

If you want your favicon to have a transparent background, you must upgrade your account.

Next, it is time to upload your favicon to your WordPress blog.

Step Three – Upload Your Favicon To Your WordPress Website

On your WordPress admin dashboard, hover your mouse over ‘Appearance’, and select ‘Customise’.

How to find customise in your WordPress admin

Once you are in ‘Customise’, select ‘Site Identity’ from the menu.

Site identity in customizer

In ‘Site Identity’, look for ‘Favicon’ or ‘Site Icon’. Favicons should be at least 512*512 pixels.

Next, select ‘Select site icon’.

Select favicon

Select the ‘Upload Files’ link.

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.

Media library

On the right, add text to the ‘Title’ and the ‘Alt text’ section. Once completed, click on the ‘Select’ link.

The next page is for cropping your image. If your picture is too big, you must select the part of the image you want to use as your favicon.

Crop your favicon

This image is 512*512 pixels no need to crop. On the right, you have a preview of your favicon.

To continue, select ‘Crop Image’ or ‘Skip Cropping’ to set your favicon.

Step Four – Publish Your Favicon

To make your favicon live on your WordPress website, click on ‘Publish’.

Publish your favicon

How To Create a Favicon On Canva And Upload It To WordPress Video Tutorial

What To Do If Your Favicon Is Not Showing Up

Should your favicon not show up in browsers after publishing, it is probably due to caching.

Caching is when a browser stores files of websites you visit to speed uploading time. If each browser had to receive fresh copies of every website you visited, you would notice the delay.

To force your browser to retrieve a fresh copy of a website, you must clear the cache.

First, left-click the padlock in the address bar.

Left click the padlock

Then, select ‘Cookies’.

Cookies

Use the ‘Delete’ link to remove all cookies, then select ‘Done’. Removing all stored cookies forces your browser to load the latest files from your website.

Finally, refresh the page.

Refresh page

Should you use a cache plugin on your website, you should clear the cache on your plugin, too.

Conclusion

Websites that don’t have a favicon look a little strange in browser tabs. Designing a favicon on Canva takes just a few minutes.

You can use a prepared image, your company logo, or a letter. Google and Facebook both use the first letters of their brands as their favicons. Don’t forget to use custom size on Canva. Favicons are 512 *512 pixels.

Once you finish creating your favicon, download the image to your computer. Then use the theme customiser on your WordPress admin dashboard to upload your favicon. Once in the customiser, click on ‘Site Identity’. Scroll down until you see ‘Favicon’ or ‘Site Icon’ and upload your image.

Finally, publish your changes to make your favicon live.

Should your favicon not show, try clearing your browser cache.

Start designing your free favicon today on Canva.com (*Paid link).

How do you design a favicon for your website? Do you use Canva? What tools do you recommend to create a favicon?

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.