3 min read🔍SEO
Exited founder (Officient). Now building MagicSpace SEO, LinkDR, AI SEO Tracker, and GenPPT.
Newsletter
Get weekly insights on seo
Exited founder (Officient). Now building MagicSpace SEO, LinkDR, AI SEO Tracker, and GenPPT.
Get weekly insights on seo
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.
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.
Your favicon should be:
.ico, .png, or .svg formatUse RealFaviconGenerator to create properly formatted favicons for your site.
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',
},
},
}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.
Ensure your favicon is:
Use these tools to verify your favicon:
chrome://favicon/[your-site-url] in the address barIf all else fails, contact Bing Webmaster Support:
You'll need to sign in with a Microsoft, Google, or Facebook account to submit a support request.
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.