Almost a year and Next.js favicon will not show on Google or Bing

Help
1

I am using Vercel to host my Next.JS website and after trying different strategies for months, I still cannot get my favicon to appear on Google Search or Bing search, only Duck Duck go. I can confirm I see the favicon on my Google Search Console crawled page:

image
image735Ă—122 16.4 KB

I have the favicon.ico in my app direcotry (using app router). I also have this in my app/layout.tsx file:

export const metadata: Metadata = { metadataBase: new URL(getURL()), title: title, description: description, openGraph: { title: title, description: description }, icons: { icon: "/favicon.ico", apple: "/apple-icon.png" // iOS “apple-touch-icon” } }
2

Hi @christosskoun, sorry that you’re facing this issue. While looking for answers, I found this helpful post from Google:

I’d recommend giving them a read. Because I think the main issue can be the size of the icon, it not matching the specs Google is looking for, or it being blocked by your middleware (if you’ve one).

Can you try these suggestions and share back what works?

2 Likes