Different favicon designs for browser tabs and search results

TD;DR: Your site’s favicon for the browser tab can be a completely different design from the one that appears in search results. Google will try and make your favicon work in a circle, which might require a different design than the tiny square that’s used for browser tabs.

Many, many years ago, around 2009, we created a little favicon for the Codeface website. It looked something like this…

Then several years later, Google started incorporating the favicon from each site in its search results.

One aspect of this that doesn’t appear to be well documented anywhere is this: If your favicon is basically a square with a single background colour and a logo in the centre, then Google will neatly crop the icon into a circle.

Whereas if your favicon has different colours in two or more corners of the square, Google will centre it in the circle which looks a bit rubbish:

This presents a bit of a dilemma - favicons as displayed in browser tabs are pretty teeny tiny.

What if you’ve got a logo that doesn’t work great at 16x16 or 32x32 pixels, and you want your browser tab to use a stylised crop that represents your brand without it being this simple centred logo on a blank canvas?

Enter the magic of different favicons at different sizes. On the Codeface website we now have…

<!-- Small square icon for browser tabs -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon32x32.png">

<!-- Circular-friendly icon for Google search results (Larger size) -->
<link rel="icon" type="image/png" sizes="48x48" href="/favicon48x48.png">
<link rel="icon" type="image/png" sizes="144x144" href="/favicon144x144.png">

…where the 48x48 and 144x144 images are the basic codeface logo in a white square:

…whereas the 16x16 and 32x32 are the old-school favicon from way back when:

We tried this, not knowing for sure whether it’d work. I could not find a comprehensive summary of this online anywhere (circa Aug 2024). But lo and behold, after a day or two^*, here’s what we’re getting:

Awesome. This appears to work for now (Summer 2024), although of course there is no guarantee it’ll continue working.

We’re at the mercy of the search engines and browsers, so if you want to have different versions of your icon appear in browser tabs and search engine results pages, enjoy it while it lasts.

^* Note that if Google seems to be taking a lot longer than expected to update the version it’s using, it could simply be because your browser is caching Google’s copy of the icon - it’s not necessarily Google itself failing to grab the new icon. I was pleasantly surprised at how quickly Google was reflecting changes to my favicon, once I remembered to clear my browser cache when looking at the search results page.

This page was handcrafted in Brighton by Codeface