What is a favicon and why your website needs one

What is a favicon?

Also known as a Site Icon, a favicon is a small graphic that represents your website to third-parties like browsers and search engine result pages.

Favicons should be part of your brand strategy and incorporated on your website to ensure that your logo will auto-generate in search results, browser tabs, and through third-party applications that search for your site’s icon.

Reading this article you will learn what favicons are, why we use them, and how to create one and upload it to your website!

Where do favicons appear?

1. Browser tabs and bookmarks
   Favicons visually set sites apart when you have multiple tabs open in your browser window.
   
2. Search engine result pages (SERP)
   Favicons display beside your website listing when it appears in SERP.
   
3. Password management tools
   If you use a master system to manage all of your passwords, favicons will display next to each entry.
   
4. Mobile app icons
   The application icons we see every day on our phones and tablets, or even desktop shortcut icons, are all essentially favicons.
   
5. Social media links and embeds
   When posting a URL to a social media platform, an auto-generated embed of sample content may contain your favicon alongside a featured image.
   
6. Google Search Console
   More likely seen by website managers or search engine optimization (SEO) specialists, your favicon will be applied to your site’s profile listing and shown in Google’s interface.

Why your website needs a favicon

In the example above where favicons appear, we already witness their power and utility.

Favicons support brand recognition and user experience

In a survey of over 1500 users, Open Source reported that 45% usually have more than 20 browser tabs open simultaneously while only 13% have less than 4. Statistically, most people have more than one tab open in their browsers. Your favicon can make the tab to your website easily identifiable amongst many. 

In the marketing world, it’s well known that it takes multiple touchpoints to “make a sale”. The forecasted amount differs from industry and year. In 2024, the average prediction is between 8-12 touchpoints, while some may only take 3 or 4.

‘Cool, but what does that have to do with a little graphic of my logo, Breeeeeeee?’ Is what you just said to yourself, I imagine. Stick with me here.

“These favicons can help web users easily identify pages they’ve visited, and you can ensure that your website is easily identifiable by using one.”

– Hubspot

Touchpoints are interactions that customers have with your brand or company and can be big or small. A big touchpoint might be signing up to receive your newsletter, saving your product to a wishlist, and clicking your abandoned cart email. Small touchpoints are just as important and often earlier in the cycle. Brand recognition is a touchpoint.

By maintaining a consistent brand across all of your online and offline marketing or engagement efforts, you provide a better user experience for your customers and partners.

Favicons improve your productivity…

As a web designer and website manager, favicons help me every day. Seriously! It’s completely possible to overlook their importance but the visual aid of the branded graphic makes my workflow more efficient.

At a quick glance, this screenshot below of multiple browser tabs with corresponding favicons tells me where my calendar and documents are versus which tabs are for editing my website, without having to read the meta titles.

While I admit I’m not the type who has so many tabs open that the browser itself starts opting out of my shenanigans, I do bounce around between two windows on dual monitors. While I find meta titles extremely important for SEO and visiting new sites (or those without favicons installed), I hardly ever read them while I’m working and mostly eyeball the favicons to know what tab I’m looking for.

Sometimes I make new websites to replace existing ones and I have the need for both the current and staging sites to be open simultaneously. If the existing site doesn’t have a favicon, I will upload one to the staging site right away so that I can differentiate between the two sites easily.

If the existing site does use a favicon, I will make a temporary alternate for the staging site and replace it before it launches. It’s a small thing, but it makes a world of difference.

… except when it doesn’t

You can only have one favicon set per site, so if you’re opening multiple tabs from the same site in the same browser window, you will be more dependent on the titles themselves.

How to create a favicon

Creating a favicon can be done in graphic design software or by using an online generator.

Graphic Editing Programs

You can create a favicon using any graphic design software that will allow you to create a canvas of up to 512 x 512 pixels and save for web resolution (72dpi), preferably as a .png file. I have used Adobe in the past, and currently use Affinity.

If you use the free version of Canva, you can create a custom size design, however, you’ll require the pro version to gain access to their brand library.

Online Tools

There are generators online that you can use that will create image or text-based favicons and supply the code you need to apply to your website. This code is really only important if you’re developing from scratch or if your framework doesn’t have a built-in tool that allows you to upload a site icon and automatically applies the necessary settings.

Recommendations

Why does the favicon graphic need to be larger than 16 pixels?

Back in my day, you know – when we walked uphill to school in 5 feet of snow, both ways… I remember favicons just being 16 x 16 pixels .ico files. Nowadays, these graphics are being pulled and used in other tools where favicons appear, which means they get displayed larger than the intended 16 pixels.

Platforms that manage your favicon upload for you (like WordPress or Squarespace) will save it at various sizes and the correct dimensions of the image will display as needed.

WordPress specifically asks you for a graphic that is at least 512 pixels in both width and height, while other platforms might only require 300 pixels.

The necessity of larger image sizes are for things like retina displays where more-detailed images can be served on higher pixel density technology. Different devices or operating systems can have different requirements, maintaining images anywhere from 114 pixels to 228 pixels or more.

By uploading a larger favicon, you’re ensuring that your site icon won’t be pixelated or obscured when displayed in areas where it’s larger than 16 pixels.

Consider dark mode and light mode

I discovered that my transparent .png favicon wasn’t displaying as intended in dark mode browsers only after switching to the mode myself. My logo was difficult to read in some places because the text is dark and dark mode will append a dark background to some elements. 

The same thing could happen in default/light mode if your favicon is saved with a transparent background but contains light colored text. Your text blends in. Save with a background color if you need a solution to this issue.

Your logo is text or too long to fit in the square graphic

Rebranding to include an icon or symbol in your logo probably isn’t the solution for everyone, but if it’s something you’re currently working on or planning for – make sure a favicon is included in the package. Essentially, it’s an alternate version of your logo or brand that will fit in a small square icon. If that’s not an option for you right now, you could try these ideas to create a favicon:

• Use only a portion of your full logo. Example: Amazon does this by only showing the letter A. Spotify does this by only using their icon versus including their name. If I were going to do this, I would pull the 3 from BE3Designs and use an orange background.
  
• Use an icon or symbol that reflects your brand or service, but make sure you acquire the appropriate licensing beforehand. Example: if you are a copywriter, you may use a graphic of paper and a fountain pen – a hair stylist may use scissors.
  
• Pull a graphical element that you use elsewhere. This can be sourced from your website or your social feeds. If you use graphical elements for things like breaking up text-based content on your web page, or applying a shape or brush to social graphics – any recurring theme you’ve incidentally undertaken can be used to your advantage here.
  Example: a business coach with a soft, feminine brand who uses a lot of floral graphics as background patterns, or stock photos may want to use the silhouette of a particular flower as their favicon.

💡 Tip: (September 3, 2024) Google’s John Mueller commented on a post by Mark Williams-Cook on LinkedIn saying, “Round-croppable favicons, for those who like technical SEO,” when Mark pointed out that favicons are now larger in SERP.

Keep usability in mind

Your favicon cannot be complex or highly detailed. If you use an online tool and upload too intricate source material, most of it will be lost when the image is resized. A logo that can still be recognized when minimized, letters, or a simple symbol are best for favicons.

How to add your favicon to your website

Most platforms will auto-populate their own brand as your favicon until/unless you customize it.

Adding a favicon in WordPress

In WordPress, your favicon is referred to as your Site Icon. You can find the settings to upload and change your site icon from the menu by selecting Appearance > Customize > Site Identity in your dashboard. In a recent update, there is now also a quick link from the General Settings page.

Adding a favicon in Squarespace

In Squarespace, there is a Favicon panel that will allow you to upload an image, or two – giving you the option of both dark and light mode versions.

Adding a favicon in Wix

By upgrading to a Premium Plan, you can gain access to the edit favicon functionality in Wix.

Adding a favicon in Shopify

Available on the Basic Plan or higher, you can add a favicon to your store in Shopify. This feature isn’t available on the Starter Plan.

Adding a favicon in Weebly

You’ll need a paid subscription to upload your own favicon to your Weebly site.

Getting help creating or adding your website favicon

There are lots of tutorials online to show you how to DIY (do-it-yourself) but sometimes you’d rather have the support of a dedicated website manager to take care of these types of things for you.