How to Fix Favicon Issues in Bing - Next.js

Summary

Fix your Bing search result favicon by using the correct file formats (.ico, .png, .svg), implementing proper Next.js metadata, and following size requirements (minimum 16x16px). We'll show you the exact code needed.

A favicon (short for favorite icon) is a small icon that appears in browser tabs and search results. While seemingly minor, favicons play a crucial role in brand recognition and user experience.

Common Favicon Issues in Bing

Many website owners face issues with their favicons not displaying properly in Bing search results. This is such a common problem that there's a popular thread about it on the Microsoft Community forum.

How to Fix Favicon Issues

1. Use the Correct Format and Size

Your favicon should be:

In .ico, .png, or .svg format
At least 16×16 pixels in size
Preferably in SVG format for best quality across devices

💡Tip

Use RealFaviconGenerator to create properly formatted favicons for your site.

2. Implement Correct HTML Code

While the standard favicon implementation works for most websites, Next.js requires a specific approach for optimal results. For the App Router, add these lines to your app/layout.tsx metadata configuration:

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  icons: {
    icon: [
      {
        url: '/_static/favicons/favicon-96x96.png',
        sizes: '96x96',
        type: 'image/png',
      },
      {
        url: '/_static/favicons/favicon.svg',
        type: 'image/svg+xml',
      },
      {
        url: '/_static/favicons/favicon.ico',
        rel: 'shortcut icon',
      },
    ],
    apple: {
      url: '/_static/favicons/apple-touch-icon.png',
      sizes: '180x180',
      type: 'image/png',
    },
  },
}

ℹ️Note

For Next.js applications, using rel: 'shortcut icon' and including all favicon variants (ICO, PNG, and SVG) is crucial for proper favicon display in Bing search results.

I had this issue across 10 Next.js sites and it took me a while to figure out. So this blog post is dedicated to helping you fix this issue.

If you're using the Pages Router (older Next.js versions), you'll need to add these manually to your _document.js or _app.js using standard HTML link tags instead.

3. Check File Accessibility

Ensure your favicon is:

Located in an accessible URL (preferably root directory)
Not blocked by robots.txt
Properly served by your web server

4. Verify Implementation

Use these tools to verify your favicon:

Chrome's built-in tool: Type chrome://favicon/[your-site-url] in the address bar
Favicon Checker

Contact Bing Support

If all else fails, contact Bing Webmaster Support:

Visit Bing Webmaster Support
Click "Raise support request"
Select your website
Choose "Bad Search Result" as the problem type
Select "Other" and describe your favicon issue

ℹ️Note

You'll need to sign in with a Microsoft, Google, or Facebook account to submit a support request.

Best Practices

Use SVG format when possible
Keep your favicon simple and recognizable
Test across different browsers and devices
Don't include favicon URLs in your sitemap.xml
Be patient - Bing may take time to update its cache

Conclusion

Fixing favicon issues in Bing search results often requires a combination of proper implementation and patience. Follow these guidelines, and if problems persist, don't hesitate to contact Bing support directly.