The Complete Guide to Favicons:  How to make a Favicon, Set Up, and Best Practices

When you browse the web, you’ve likely noticed those tiny, distinctive icons that appear in your browser tabs and bookmarks. These little icons, known as “favicons,” may be small in size, but they play a significant role in your website’s branding, recognition, and user experience. If you’re a website owner you should definitely have one of these set for your website, so we are going to go over how to set one up for your website, and the best practices for designing a great looking favicon.

So, are you ready to make your website stand out and create a memorable brand presence? Let’s dive into the world of favicons and unlock the secrets to designing, setting up, and optimizing these tiny, yet mighty, icons.

What is a Favicon?

A favicon, short for “favorite icon,” is a small, square icon that is used to represent a website or webpage. Favicons are displayed in various places within web browsers, including:

Browser Tabs: Favicons appear in the tabs of web browsers next to the page title, making it easier for users to identify and switch between open tabs.

Bookmarks or Favorites: When users bookmark a webpage or add it to their list of favorites, the favicon often appears next to the page title in the bookmark or favorites list.

Home Screens (Mobile Devices): On mobile devices, when a user saves a webpage to their home screen, the favicon can be used as the shortcut icon.

Favicons make a website easily identifiable and provide a visual connection between the website and its users. A well-designed favicon is typically a simplified version of a website’s logo or an icon that represents the website’s content or purpose. Favicons are typically very small, with standard sizes of 16×16, 32×32, or 48×48 pixels, to ensure they display clearly and legibly in different contexts.

Designing Best Practices

Because Favicons are tiny but mighty, there are a few things to consider when designing your websites Favicon: 

Simplicity: Favicon images are tiny and need to be easily recognizable even at a small size. Keep your design simple and avoid intricate details or complex graphics. A simple, clear design will be more effective and memorable.

Consistency with Branding: Your favicon should be consistent with your overall branding and website design. Use your brand’s colors and/or logo elements in your favicon to maintain a cohesive look and feel. This helps users recognize your website easily.

Clarity and Readability: If you’re using text in your favicon, ensure that it is clear and readable, even when scaled down. Choose a legible font and a size that’s appropriate for a small icon. 

Ideally, if you’re using text, I’d stick to one or two letters maximum so that it remains legible at the smallest size of 16×16.  

You’ll also want to avoid thin dainty appearing fonts as they will be very difficult to see on such a small scale.  Consider bolding the font a bit to make it more legible.

Relevance: The favicon should be related to the content, purpose, or brand of your website. It should provide a hint or a glimpse of what users can expect when they visit your site. For example, if you’re running a photography website, your favicon could be a camera icon or a stylized image of a camera lens.

Test on Different Devices: Favicon sizes can vary across different devices and browsers. Test your favicon on various platforms and devices to ensure it looks good and maintains its recognizability. Common favicon sizes include 16×16, 32×32, and 48×48 pixels.

Remember favicons appear in browser tabs, bookmarks, and even when a user saves your website to their home screen on a mobile device. A well-designed favicon can help users easily identify and remember your site.

How to make a Favicon in Canva

As of this writing, Canva doesn’t have a specific template size for a favicon.  However, you can still create one using Canva by following these steps!

Create a new design 

You’ll start by logging into your Canva account and use the purple button to create a new design.  You’ll want to create a square design to start with.  I typically start with 512×512 since this is the suggestion directly from WordPress which we will see in the next step.  This will be big enough to see as you design, but small enough that it will size down easily into a favicon space.

Design Your Favicon

I would recommend using your Brand Kit and the design tools inside of Canva. That will help you design a simple design that can easily fit into a small space.  Keep all the tips above in mind as you design.

Export Your Design

Once your design is complete, go to the Share icon in the top right and click the Download button.  Under file type, you can choose either the JPG or PNG versions.  I typically use JPG as the file size is lighter in weight than a PNG file.

How to assign a favicon to your WordPress website

Once you’ve designed and exported your Favicon, you are ready to upload it to your website! This part is super easy!

You’ll login to your WordPress dashboard and navigate to Appearance > Customize.  Once there, you’ll see Site Identity as one of the options on the left panel. Inside there you’ll see the area for the Site Icon (which is also your Favicon).  You’ll click the Select Site Icon button and either choose the design from your Media Library or Upload the design you just exported from Canva!

That’s it!  You should have a gorgeous new icon in your web browser for your website!  

Note, that if you have a cache plugin this icon can take a day or so to appear in some browsers so if you’re not seeing it right away, be patient!