fbpx

How To Create A Favicon In Canva (Step By Step)


Creating a favicon for your website or blog can be a daunting task. It’s too easy to spend hours searching for a perfect image and then struggle with complicated software programs to make it right. Luckily, you can easily make a favicon in Canva with no technical experience required.

A professional-looking, unique favicon will help visitors instantly recognize your site or blog, making a strong first impression. In this post, you’ll learn how to create the perfect size canvas for your favicon and export it correctly.

How To Create A Favicon In Canva

There are only four steps to create your favicon. I’m not going to go over how to make your logo or graphic required to create your Favicon, but once you have that part ready, you can create your favicon.  

Step 1: Create A New 48 x 48px Design

The size of a favicon on a website is 16 x 16px. Unfortunately, you can’t create a new design in Canva that small. 

Instead, you can create a 48 x 48px design. This size allows the Favicon to be scaled to the correct size automatically when you upload it to your website. 

To create a 48 x 48px sized canvas, click the Custom Size button on the Canva Home Page. Then, type 48 in the Width box and 48 in the Height box. When you are ready, click the Create New Design button. 

Your new canvas will be created in a separate window. The first thing you’ll notice is how small the canvas is. Also, you can’t zoom in more than 500 percent. 

This means the original design should be created in a separate project, as you won’t be able to zoom in close to see and adjust small details. 

Step 2: Add Your Logo Or Graphic To The Design

Once your logo or graphic is completed and ready to add, click on the Uploads tab, then click Upload Files

You will be prompted to locate your logo or graphic on your hard drive. Once you do, it will be loaded to your Canva account. 

Click on your uploaded file to add it to your Canvas. 

Alternatively, you can add your logo or graphic to your project by dragging it from another window onto your Canvas. 

Step 3: Export Your Favicon As PNG With Transparency

This step is essential in the process. If exported incorrectly, your favicon will end up with an unwanted white background. 

To start, click the Share button in the top right corner. 

In the menu that pops down, select Download

Make sure that PNG is chosen in the File Type drop-down menu in the options. PNG format will allow transparency while maintaining the best possible quality. 

The other important option here is the Transparent Background option. Make sure that this option is checked. Otherwise, when you export your favicon, it will export with a white background. Which is great if that’s what you’re going for, but most likely, you’re not. 

Once you’re ready, click the Download button. 

Your favicon will be downloaded on your hard drive. 

If you open the file, you can preview your favicon and make sure the background is transparent. 

Step 4: Upload The Favicon To Your Website

Uploading a Favicon to your website is a different process, depending on who hosts your website. To learn the method that you need, look for your web host below: 

If your web host was not in the list above, look on your web host’s website for specific instructions on uploading your favicon.

How Do You Make A Favicon Round In Canva?

A popular look for a favicon is a logo with a circle behind it. This is a professional-looking favicon that’s easy to design. 

To start, click on the Elements tab on the left side of the screen. Scroll down until you get to the Lines & Shapes section. Click on See All.

This will show you all of the available shapes that Canva provides. Choose the circle (or another shape if you wish). 

A circle will appear on your canvas.

With your circle on the page, resize it until it fills up your entire canvas, leaving the sides of the circle open. 

Once you like how your circle looks on your page, you can change its color by clicking the Color Picker in the Options Bar. In the side panel, you can pick whatever color fits your needs. 

Pick a color that goes well with your logo or graphic and make it pop off the circle. 

With the color of your circle picked out, you need to send it behind your logo or graphic. A quick way to do this is to right-click the circle, then click Send Backward. You can also click Control + [ (Win) or Command + [ (Mac). 

After sending your circle backward, you may have to adjust your logo or graphic to make it line up better. Click on your graphic and let Canva help you line it up with the purple guidelines that pop up. 

Now that your circle is the correct color and behind your lined-up logo or graphic, it’s time to export it. You can export your favicon exactly how it was explained above, but here’s a quick rundown: 

Click the Share button, then choose Download. In the options, ensure that PNG is selected in the File Type Drop Down Menu and that Transparent Background is checked. Click the Download button when ready to download the favicon to your computer.  

If you wish, you can always save a version with a background circle and a version without one to see what looks and works the best. 

What Should Your Favicon Look Like?

When designing a favicon for your website, the key is to keep it simple. Aim for something that can be clearly seen in small sizes and still represent your brand effectively. Try to avoid using too many details or intricate designs.

If you’re using a logo, condense it down as much as possible without losing its integrity as a representation of your brand. If your website is about a specific topic, use an icon that illustrates that concept. For example, if you have a photography site, you might have a graphic of a camera. A travel website might have a plane as its favicon.

No matter what design you choose for your favicon, ensure it is distinct and recognizable so visitors will easily recognize it amidst the other tabs in their web browser. Keep it concise, and make sure it accurately represents your brand.

Happy Editing!

Article By

Brendan Williams

Hey, I'm Brendan! I'm a professional photographer and photo retoucher who has spent the majority of his career shooting or retouching outdoor lifestyle and social media campaigns for brands like G-Adventures, xoxo Bella, P&G, Fitbit, Chevy, Tourism California, and more. You can view my photography portfolio here.

These days I primarily focus my efforts on this site, creating guides and tutorials that I wish I had earlier in my career. Each week I publish new tutorials on Photography, Photoshop, Lightroom, and Canva to help you unlock new skills and bring your creativity to new levels! Everything you learn here is backed by real experience, so you can finally skip the fluff and focus only on what matters.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Continue Reading:

How To Whiten Teeth In Photoshop (2 Easy Ways)

Discover two surprisingly easy ways to whiten teeth in Photoshop with the help of a few beginner-friendly sliders.

How To Use Gradient Maps In Photoshop

Learn the ins and outs of how to use gradient maps in Photoshop to color grade your photos and transform your images for the better.

How To Make A Silhouette In Photoshop (2 Best Ways)

Here are two easy ways to make a silhouette in Photoshop. The first method creates a silhouette graphic, while the second in more realistic.

Adobe Lightroom System Requirements For Mac & PC

Here's a breakdown of the system requirements for Adobe Lightroom Classic and Lightroom CC to make sure it will run smoothly on your computer.

How To Add A Watermark In Lightroom Classic & CC

Learn how to add a text or graphic watermark to a photo in Lightroom Classic and Lightroom CC to protect your photos from theft.

How To Use Dehaze In Lightroom

Learn how to use dehaze in Lightroom along with five different ways you can use the dehaze tool to improve your images in Lightroom.

35+ Best Fonts For Logos In Canva

Here's a list of the best fonts for logos in Canva to help give you inspiration in your next logo design!

How To Create Curved Text In Canva

Learn how to quickly create curved text in Canva desktop and mobile with just a few clicks to spruce up any design!

35 Best Fonts For Teachers In Canva

Discover the best fonts for teachers in Canva to help with your next worksheet or presentation for your class!

The 9 Best SD Cards For Sony

Discover the best SD cards for Sony to find the most reliable and best valued memory cards for your photo and video needs.

The Best Canon Lens For Low Light (10 Top Picks)

Get a complete view of the best Canon lenses for low light photography and video along with tips to make the right buying decision.

Affinity Photo VS Photoshop – Which Should You Choose?

Let's take a deep look at the similarities and differences between Affinity Photo and Photoshop to see which program you should pick.