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

Favicons are those little icons you see in your browser tabs. When you have lots of open tabs in your browser it helps you recognize and find the page you were looking for. They are important for your branding, even more so, because Google recently decided to add them to the mobile search results. So, let’s take a closer look at those little icons and your branding here!

What is a favicon?

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

Which would help you find the tab you need when you had many open tabs in your browser. But, for some time now, Google shows them in their mobile search results too:

favicon mobile search results

Did you know that, as of Yoast SEO 12.1, you’re able to see your site’s favicon in Yoast SEO’s mobile snippet preview too?

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

Make it stand out

You should make sure your favicon stands out, whether it’s 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, you 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 is making sure people will relate your favicon to your website immediately.

As to which format and size to use for your favicon you best stick to Google’s guidelines. 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.

An SEO benefit?

Are there real SEO benefits to favicons? Well, the advantage of these icons certainly became bigger now they’re present in the mobile 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. But, beware: this only works if your favicon is associated with a positive feeling regarding your brand or website. In practice, this means 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 how to change your site’s favicon in WordPress, step by step.

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 »

Free: WordPress for beginners training

  • Find out how to set up your own WordPress site
  • Learn everything about creating and maintaining a WordPress site
  • Plus: learn all about WordPress, like its history and its open-source community
  • Free online & on-demand training by Yoast
More info

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

  1. Ajmal
    Ajmal  • 2 months ago

    Hi Willemien,

    You are right, because when we are seeing “not secured” on browsers we hesitate enter, so a good favicon indicates the standard of a website.

    Cheers

  2. Teguh Iw
    Teguh Iw  • 2 months ago

    Is favicon has an impact to SEO? I think favicon just a “sweetener” blog look like..

  3. Leonardo Candoza
    Leonardo Candoza  • 2 months ago

    A good favicon is an underappreciated part of a successful website. I love seeing websites with an exciting favicon.

    • Willemien Hallebeek
      Willemien Hallebeek  • 2 months ago

      Thanks, Leonardo, we love to see them too!

  4. Muneeb
    Muneeb  • 2 months ago

    Interesting!

  5. pagearabic
    pagearabic  • 2 months ago

    How do I use them in content

    • Willemien Hallebeek
      Willemien Hallebeek  • 2 months ago

      Hi! Favicons aren’t used in content. You’ll just see them in the tabs or the search results.

  6. V.J. Miller,Sr
    V.J. Miller,Sr  • 2 months ago

    I never knew what a favicon was until I read this article. I got right to it and created one today

    • Willemien Hallebeek
      Willemien Hallebeek  • 2 months ago

      Hi V.J., Way to go! Now, wait and see if it’ll make a difference :-)

  7. Mark
    Mark  • 2 months ago

    Favicon’s really helped us in mobile search results of our website, especially helped to increase our click-through rate to our sales page.

    Thanks a lot for your help.

    • Willemien Hallebeek
      Willemien Hallebeek  • 2 months ago

      Hi Mark, Incredible that such a tiny icon can make a difference, right?

  8. Ely Tv and Rhymes
    Ely Tv and Rhymes  • 2 months ago

    Thank you for this post. I am trying to set up my wordpress site now. Its been a long time since i worked with wordpress and it seems to have gotten wayyyyyy advanced than when i blogged with it several years back.

    • Willemien Hallebeek
      Willemien Hallebeek  • 2 months ago

      Hi Ely, Yes, WordPress changed significantly over the years. If you need some assistance setting up your site, we’ll have some great news for you on Thursday! Stay tuned!