Favicons and your online brand: Make sure you stand out!

Favicons are those little icons you see in your browser tabs. When you have many open tabs in your browser, they help you recognize and find the page you were looking for. They are even more important for your branding because Google shows them in the mobile and desktop search results. So, let’s take a closer look at those little icons and your branding here!

What is a favicon?

Long ago, you would only see those little icons, called favicons, in your browser tabs:

Favicon in your browser bar

This would help you find the tab you need when you have many open tabs in your browser. But for some time now, Google has shown them in its search results.

The Yoast logo is an example of a favicon in Google search

If your favicon represents a trustworthy brand, it can help people recognize your brand through this little icon, thereby boosting your site’s click-through rate. After all, a picture says more than a thousand words!

Make it stand out

You should ensure your favicon stands out, whether from that long list of tabs or the search results. Check if it matches your logo and website well. Especially when you are not one of the big brands and want people to recognize this little icon. Two tips directly related to that are:

  • Avoid too many details in your favicon;
  • Please use the right colors, so the favicon doesn’t blend in with the gray of your browser tab.

Both are closely related to branding. Your brand should be recognizable in your favicon. Proper branding ensures that people will immediately relate your favicon to your website.

You should stick to Google’s guidelines regarding which format and size to use for your favicon. This is what they recommend:

Your favicon should be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files, of course, do not have a specific size. Any valid favicon format is supported. Google will rescale your image to 16x16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16x16px favicon.

Yoast SEO shows your favicon in the Search Appearance section

An SEO benefit?

Are there real SEO benefits to favicons? Well, the advantage of these icons certainly became bigger now they are present in the search results. While adding a favicon won’t make your page rank higher directly, it might increase the click-through rate to your page when it is shown next to your URL in the search results. Of course, this only works if your favicon is associated with a positive feeling about your brand or website. In practice, you should invest time in holistic SEO: making your website (and product/service) awesome in every way!

Favicons in WordPress

If you use WordPress, you might already know that there’s been a favicon functionality in WordPress core ever since version 4.3. So you can use this default functionality, without hassle. It’s located in the Customizer and is called Site Icon. Here, you can read step-by-step instructions on how to change your site’s favicon in WordPress.

Final note: when you upload your icon, don’t forget to optimize the image, so it won’t slow down your site.

Read more: 5 tips on branding »

Coming up next!