Create a Favicon in Canva — Step-by-step Guide

Have you ever wondered what those colorful, tiny icons on your browser tabs are? 

Perhaps, your first thought would be that of a brand’s logo.

In a way, you’re correct. But, while you’re technically correct, that “logo” we’re talking about is actually a favicon.

Favicons, as you’ll find over Google, are browser icons representing a website or brand — a mini logo, so to speak. 

Since they’re like mini-logos, favicons serve to enhance the users’ experience and brand awareness through visual association.

And, as stated earlier, you can usually find these favicons on the left side of your browser tabs. 

They’re usually 16 x 16 pixels or 32 x 32 pixels in size, just enough for you to recognize it when condensed after opening multiple tabs.

Now that we’re on the topic let’s get straight to creating one on Canva. 

 

How to Create a Favicon in Canva

First, set the document dimensions to 40 x 40 pixels (Canva does not allow anything below 40 px!) in size. You can select a template from Canva’s gallery and edit the colors and icons. If you build from scratch, change the background color, add text and icons, and edit the colors and alignment before downloading as a PNG file.

 

Creating Favicons in Canva: The Basics

Quite baffled by how to start creating your favicon in Canva? 

Well, you don’t have to, as it’s quite similar to how you create a logo in Canva, only in a smaller size.

So, shall we get started?

 

Method 1: Using Favicon Templates

Step 1: After logging in to your Canva account, tap on the “Create a New Design” button.

Step 2: On the dropdown menu that appears, select the “Custom Dimension” option.

Step 3: In the 2 empty boxes that appear, input 40. The ideal size for favicons is 16 x 16 px, but as Canva’s lower limit for document dimensions is 40 x 40 px, we will use that instead.

Yet, the 40 x 40 dimension isn’t an absolute must when creating your favicon in Canva. You can opt to use a bigger document size, but it’s important to note that the Favicon should always take on the shape of a square. 

Meaning, the length should always be equal to the width (48 x 48 px, 64 x 64 px, 256 x 256 px, etc.) 

But, as stated earlier, favicons ideally are in the 16 x 16 px dimensions. Don’t worry too much about it at this point as you can always resize it using a third-party app or website later on.

Just make sure that the unit for the said file’s set in “pixels.” Then, tap on the “Create New Design.”

Step 4: Once you’re inside the editor page, head over to the left-side Canva menu and tap on “Templates.”

Step 5: In the “Templates” gallery, search for a template to use either by scrolling down or encoding specific terms in the search bar.

Depending on what type of favicon you want to create, you can choose to have a text favicon or an image favicon.

But, a note worth taking at this point. Canva currently doesn’t feature real Favicon templates.

What you see in the “Templates” gallery are design suggestions Canva deems as suitable for the 40 x 40 size. So, technically, you can use them as your favicon templates.

Step 6: Click on the template you’ve chosen to make it appear on your canvas. 

Step 7: Change the background color by tapping on the colored tile on the editor toolbar. Don’t do this step if you’re planning to make a favicon featuring a transparent background.

Step 8: Choose the color you’d want to use that resonates or is the same with your brand using the colors presented in the gallery. 

If, however, you’ve got a specific hex code, you can tap on the “+” tile on the gallery instead and encode it on the search bar instead.

If you don’t have a specific code yet, simply encode the color you want to find on the search bar, and choose what suits your fancy.

Step 9: After editing the background color, change the text by double-clicking on it and encoding your brand’s initials if you’re creating a text favicon. 

You can also change the font’s color and style by clicking on the corresponding icons on the editor toolbar.

You can even upload custom fonts if you’ve got one.

Step 10: For image favicons, you can first ungroup the grouped elements on the said template (if they’re grouped) before deleting the text (if there are any).

Step 11: Increase the size of the remaining elements by clicking and dragging on the white circles on the corners. 

If one of the elements on the template isn’t aligned with your brand, simply delete it and search for another one in the “Elements” gallery.

Step 12: Change the colors of the remaining elements according to your brand colors by tapping on the colored boxes on the editor toolbar.

Step 13: Once you’re satisfied with how your favicon looks, tap the “Download” button on the upper right of your Canva screen. 

Step 14: If a transparent background is what you want, click on the PNG file type. Select JPG instead if you don’t want to remove the background before hitting the “Download” button.

So, that’s how you create a favicon using a template. How about if you’re planning to do it from scratch?

 

Method 2: Creating Favicons from Blank Canvases

Step 1: Once you’ve logged in to your Canva account, tap on the “Create a New Design” button.

Step 2: On the dropdown menu, choose “Custom Dimensions” and encode the document’s size accordingly (40 x 40). Just set the unit to pixels.

Step 3: Once you’re on the editor page, change the canvas’ color by clicking on it and tapping the rainbow-colored tile in the editor toolbar.

Step 4: Select the color you’d like to use by tapping on the corresponding colored tiles or add/search a new one by clicking on the “+” tile.

Use a hex code to search for the color directly or drag on the corresponding sliders instead.

Step 5: For text favicons, add a text box either by tapping the “Text” tab on the left-side menu and choosing “Add a heading” or pressing “T” on your keyboard directly. 

Resize it and change the font style and color accordingly after encoding the letter or letters that represent your brand.

Make sure, though, to take advantage of the guidelines that appear for alignment and spacing.

Step 6: For image favicons, head over to “Elements” instead and select the graphics that go with your brand. 

You can either scroll down or encode a specific term on the search bar. Keep adding until you’ve got what you needed.

Step 7: Resize your elements in a way that it fills up most of the space on your canvas by dragging on the white circles diagonally. 

Step 8: If you need to change the elements’ colors, just tap on them accordingly before clicking the colored tile on the editor toolbox.

Step 9: If everything’s to your liking, hit the “Download” button and choose either JPG or PNG as your file type.

Simple, right? What are you waiting for then?

Head over to your Canva account and let your favicon-making process begin!

 

Frequently Asked Questions about How to Create a Favicon in Canva

 

Can you download a favicon with a transparent background if you’re a free Canva account user?

Unfortunately, you cannot download your favicon with a transparent background if you’re a free Canva user. Only Canva Pro users can avail of the transparent background feature in PNG. However, you can still download your favicon in PNG format and head to remove.bg to manually remove the background.

 

Can you create multiple favicon versions in Canva?

Just like designing logos, you can create various versions of your favicons in Canva. Simply add another page or duplicate the existing page and edit the colors and text to create a new version of the favicon.

 

Can you group elements in your favicon despite its small size?

Of course! No matter how small your document size is, you can still take advantage of the grouping feature in Canva. Highlight all the elements before tapping on the “Group” option on the editor toolbar or press Ctrl and G simultaneously.