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.

I use Canva for my blog banners, YouTube channel thumbnails, and favicons. It is the best online graphic design platform for bloggers, in my opinion. Go to Canva.com (*paid link) today to access an excellent free design tool.

A favicon appears in website browser 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.

How To Create A Favicon On Canva

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

You can upload an image from your computer by using 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

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

For example, click the Text link to create a simple one-letter favicon. 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

Click anywhere on the white background to change the background color, then select the color icon.

Change background color option

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

Change the background color

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

HTML color codes

To change the font, size, or color 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 Favicon

Canva allows you to download your favicon for free. 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 WordPress

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, click 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

Add text to the Title and the Alt text section on the right. 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.

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 Video Tutorial

What To Do If Your Favicon Is Not Showing

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

Caching is when a browser stores files of websites you visit to speed loading 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.

Conclusion

Websites that don’t have a favicon look 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 customizer on your WordPress admin dashboard to upload your favicon. Once in the customizer, 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?



More posts…



Leave a Reply

Your email address will not be published.

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