When creating your own website and blog, it’s amazing how many things you just don’t think about, or, that the things you have thought about turn out to be more difficult than they should or harder than what you expected.
Enter the favicon, the tiny image you might spot here and there when present, but leaves an ugly, empty, obvious void when it’s missing.
And yes, it’s small—the optimal favicon size is 16×16 pixels. To put that in perspective, your typical social media profile picture, like that of Facebook, is going to be about 180×180.
How to Create a Favicon in Canva
All that said, it doesn’t have to be difficult, and I’ll show you how creating a favicon in Canva can be quite easy, actually.
1. Create a Canvas
Now, even though I just mentioned the small size above of 16×16 pixels, you’ll want to create a favicon on a larger canvas in order to preserve the quality. In my case, when creating this WordPress site, I was prompted to create a favicon at 512×512 pixels.
2. Choose the Design Element
As mentioned above, the favicon is usually a smaller representation of your logo. It should still be “on brand” and that usually falls on the main design element.
For instance, here are four example logos from Canva.
As you can see, each is anchored by a single design element, each of which could stand on its own as the favicon, and still representing the brand (and still noticeable and recallable as a brand mark). When you take the text away, you’d be left with the following.
3. Resize to Max
Once the design element is settled on, you’ll want to maximize the size of it—remember, the favicon will only be 16×16 pixels when uploaded and displayed, so depending on what you’ve selected, much of it might be difficult to make out, or downright confusing for anyone who isn’t really sure what they’re looking at.
4. Download
Now, this is where most people get tripped up! In what seems harmless, how you download your favicon plays a big role in how well it looks when in use. Much of that comes down to the background, and whether or not you’re trying to use an image with a white or colored background, or, one that has a transparent background.
To illustrate, take a look at the below. On the left, I’ve downloaded the favicon with the natural white background, and on the right, I’ve downloaded with a transparent background. Which looks best?
As you can see, the logo on the browser on the right looks much more professional and crisp.
Now, knowing that is half the battle, but the other is actually being able to download with a transparent background. This is possible in Canva, but requires a Canva Pro subscription. In a pinch, you can try Canva Pro for free for 30 days, which, with this handy tutorial, should be more than enough time to get your favicon created!
What is a Favicon, Anyway?
A favicon would probably be more aptly named as “tab icon,” as it’s typically most visible when you look across your browser tabs. For instance, if you look to the tab for this very blog, you’ll see a tiny representation of my logo as the favicon.
You may have also seen favicons in search results, or in your bookmarks, or basically anywhere a site is identified in small spaces.
What makes favicon design difficult?
So if a favicon is so tiny, and it’s just a smaller version of your logo in most cases, then why is it so difficult to create?
For starters, small doesn’t always mean easier, and in fact, can mean “harder” for those of us who have a really difficult time being disciplined in our design work.
Also, if you commissioned someone to create your logo, you usually don’t think to ask for a favicon in that instance. So, when it finally comes time for you to upload one to your site, you’re left with this giant logo and the need to shrink it down to a 16×16 icon.
Last, when it comes to design, transparency and backgrounds tend to be real sticklers. In this case, and with logos in general, creating an image with a transparent background, even in Canva, can give people fits.
