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!
