Bing Not Showing Your Favicon? How to Fix It (Next.js)

TL;DR

Ship three files: favicon.ico, a square PNG or SVG icon, and an Apple touch icon.
In Next.js App Router: drop them into app/ and Next.js writes the tags for you.
Make sure Bing can fetch them: not blocked by robots.txt, served with a 200 status.
Then request a recrawl in Bing Webmaster Tools. Favicon updates can still take weeks.

A blank globe next to your site in Bing looks broken, and it costs clicks. It matters more than it used to: Bing's index powers Copilot and feeds into ChatGPT search, so the same icon can show up in AI answers.

I had this problem across 10 Next.js sites before I worked out the pattern. Almost every case came down to one of three things: the wrong file set, tags Bing could not parse, or an icon Bing could not fetch.

1. Use the right favicon files

Ship three files so every search engine and device finds something it accepts:

favicon.ico at the site root. Old-school, but it is the first place crawlers look.
A square PNG or SVG icon. Google requires a square of at least 8x8px and recommends larger than 48x48px. A 96x96 or 192x192 file is a safe choice for Bing too.
apple-touch-icon.png at 180x180 for iOS home screens.

Keep the design simple enough to read at 16px, and make it square. A wide logo squeezed into a square renders as a smudge.

Tip

Use RealFaviconGenerator to create the full set from one image.

2. Add the icons in Next.js

The easy way: file conventions (App Router)

Put the files in your app/ directory and Next.js generates the <link> tags automatically:

app/
  favicon.ico        -> <link rel="icon" href="/favicon.ico" sizes="any" />
  icon.png (or .svg) -> <link rel="icon" href="/icon?..." type="image/png" />
  apple-icon.png     -> <link rel="apple-touch-icon" href="/apple-icon?..." />

Which file in app/ becomes which tag

favicon.ico must sit in the root app/ folder. icon and apple-icon can live in any route segment.

The explicit way: the metadata object

If your icons live elsewhere (for example a CDN or /_static/), declare them in app/layout.tsx. This is the setup that fixed Bing on my sites:

import type { 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

Include all three variants (ICO, PNG, and SVG) and keep the shortcut icon entry for the ICO file. Bing picked up the favicon on every site once all three were present.

On the Pages Router, add the same <link> tags in pages/_document.tsx inside <Head>.

3. Make sure Bing can fetch it

Most "Bing ignores my favicon" cases are really "Bing cannot load my favicon."

Four checks that Bing can fetch it

Open the file directly. Visit https://yoursite.com/favicon.ico in a private window. It should load as an image, not a redirect, login page, or 404.
Check the status and type. Run curl -I https://yoursite.com/favicon.ico and confirm 200 and an image content type.
Check robots.txt. Make sure it does not block the icon path, such as /_static/ or /images/.
View your page source. Confirm the <link rel="icon"> tags are in the HTML that the server returns, not only added later by JavaScript.

Also keep favicon URLs out of your sitemap. It is for pages, not assets.

4. Ask Bing to recrawl

Bing only refreshes a favicon when it recrawls your homepage.

Open Bing Webmaster Tools and verify your site if you have not already.
Use URL Inspection on your homepage, then Request indexing.
If you have IndexNow set up, submit the homepage URL there too.

Then wait. Favicon changes in Bing commonly take anywhere from a few days to several weeks to show.

If it still does not show

Contact Bing Webmaster Support:

Go to Bing Webmaster Support.
Click "Raise support request" and select your site.
Choose "Bad Search Result" as the problem type, then "Other," and describe the favicon issue.

You need to sign in with a Microsoft, Google, or Facebook account. For other search engine indexing problems, see my list of website indexing tools.

FAQ

Why is my favicon not showing in Bing?

Usually the file is missing, not square, blocked by robots.txt, or only added by JavaScript. Bing also has to recrawl your homepage before a new favicon shows.

How long does Bing take to update a favicon?

It can take a few days to several weeks. Requesting indexing for your homepage in Bing Webmaster Tools speeds it up.

What size should a favicon be for search results?

Square, and larger than 48x48px, such as 96x96. Also keep a favicon.ico at the root and a 180x180 Apple touch icon.

Does Bing support SVG favicons?

Serve an SVG together with PNG and ICO versions. Browsers that support SVG use it, and everything else falls back to the PNG or ICO.

Does a favicon affect SEO?

It does not change rankings, but a clear favicon makes your result easier to spot and can lift click-through rate, in Bing, Google, and AI search answers.