Why is Google not showing my favicon?

So you just added your favicon to your website and you see it working perfectly when you open your site in a browser.

But then you search for your website on Google and see this ugly favicon next to your search listing:

This was happening with a favicon on one of my websites and I found it frustrating. I even had another website (this blog) that had the exact same dimensions for my favicon but Google was showing that favicon no problem.

Google published favicon guidelines, which took me some time to find and then use to diagnose my specific favicon problem.

I realized my favicon was 512x512, which is not a multiple of 48.

This turned out to be my issue. My website is built with Next.js and I recently started using the awesome next-optimized-images package to optimize the images on my site. While optimized images are great for site content, they result in dynamic image URLs that look like this:

Again, that is not a problem for most images but considering Google's expectation that favicon URLs be stable, the hashed URL is a problem.

To solve this, I first created a 48x48 pixel version of my logo and saved it as favicon.ico in my Next.js /public directory. This is all you need for browsers to be able to detect and use the favicon.

Next, I added this line to my Next.js _app.tsx. This tells Google where to find the favicon.

That's it! My site's favicon now appears in Google's search results.

Questions about favicons? Find me on Twitter.