Frankensteinke

The case of the white favicon

The problem

A strange issue was reported last week: in place of a favicon in Google search results for our website, an empty white circle showed instead.

A google search result for bbb.org, with an empty white circle in place of a favicon

My first thought was that something was wrong with the favicon file, or that Google couldn't find it. This couldn't be the case, though -- the favicon still showed up in other search engine results, and I remembered that when Google couldn't find a favicon for a site, they just display a globe icon, not an empty circle.

An aside: favicon file formats

I checked the favicon code again.

<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

We have two favicon icon files for BBB.org. The .ico format is the legacy format. The .svg format is nice, because as a vector file, it scales without distortion. The .svg icon has another benefit -- in dark mode, we can add HTML code directly to the SVG source that changes the favicon's color. Instead of a dark blue on a dark background, we could get a white icon on a dark background.

<!-- style snippet to change the icon's color in dark mode -->
<style>
  path {
    fill: #005f86;
  }

  @media (prefers-color-scheme: dark) {
    path {
      fill: #fff;
    }
  }
</style>

The solution

Lost, I started looking at other sites with two favicon files to see how they included them. I noticed that GOV.UK added a sizes attribute to their <link> element.

I started wondering if maybe Google was trying to use our SVG favicon, but only getting the top 48 pixels of background (white/empty).

I added the sizes attribute, with a value of 48x48 for the .ico format and any for the .svg format.

<link rel="icon" sizes="48x48" href="/favicon.ico" />
<link rel="icon" sizes="any" href="/favicon.svg" type="image/svg+xml" />

This fix worked! A few days after pushing the update and requesting a reindex of the home page, we started seeing the favicon in Google results again.

Why am I writing this?

I'm writing the article that I wish I found when I was searching for this issue, since it was pretty tough to figure out. Hopefully I can save some time for somebody who runs into the same thing.