How I Fixed Google Showing the Wrong Favicon (SVG Was Why)

The icon nobody chose

For a while, Google showed a blue gradient tile next to this site in search results. It was a mark from an earlier design. It appeared nowhere on the site itself, and browser tabs showed the current icon. It is tempting to treat a wrong favicon in Google as a cache that will clear on its own. Waiting would not have fixed this one, because it was not a cache. Google was showing exactly what the site told it to.

What the site actually declared

The site is a Next.js app, and its root layout declared icons like this:

icons: {
  icon: "/icon.svg",
  apple: "/icon.png",
},

That renders two link tags on every page: a rel="icon" pointing at an SVG with the current mark, and a rel="apple-touch-icon" pointing at a PNG that nobody had regenerated since the redesign. It was the old blue tile. And /favicon.ico, the file browsers and plenty of tools request by default, did not exist: the URL returned the site's 404 page.

Three files, three different states. The one that had drifted furthest was the one Google picked.

What Google will accept

Google's favicon guidelines for Search are short, and one line explains everything. The supported file formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on the list.

The rest of the rules, from the same page, last updated on 28 August 2026:

• The icon can be declared with icon, shortcut icon, apple-touch-icon or apple-touch-icon-precomposed. The apple-touch-icon counts as a favicon source.
• Googlebot-Image must be able to crawl the favicon file, and Googlebot the home page.
• It must be square and at least 8x8 pixels; Google recommends larger than 48x48.
• One favicon per hostname. Subdirectories cannot have their own.
• The favicon URL should be stable.

Put the site's declarations next to those rules and the choice makes itself. The rel="icon" file was an SVG, which Google does not list as supported. The apple-touch-icon is an accepted source and was a PNG. So the only declared icon Google could use was the stale one. Nobody at Google can be asked why it picked what it picked, but nothing else is needed to explain it.

The fix: one mark, every format

The declaration now names a real favicon.ico first, keeps the SVG for browsers that prefer vector, and adds a large PNG and a matching apple-touch-icon:

icons: {
  icon: [
    { url: "/favicon.ico", sizes: "48x48", type: "image/x-icon" },
    { url: "/icon.svg", type: "image/svg+xml" },
    { url: "/icon.png", sizes: "512x512", type: "image/png" },
  ],
  shortcut: "/favicon.ico",
  apple: { url: "/apple-icon.png", sizes: "180x180", type: "image/png" },
},

The favicon.ico holds three images, 48, 32 and 16 pixels, each stored as PNG inside the ICO container, which every current browser reads and which is far smaller than the old bitmap format. Whatever Google or a browser picks from that list, it is now the same mark.

Making the files unable to disagree

The real bug was not the SVG. It was that three icon files could hold three different designs and nothing noticed. So the icons are no longer edited by hand. public/icon.svg is the only source, and a small script renders every raster from it: the 512 pixel PNG, the 180 pixel apple-touch-icon and the three sizes inside favicon.ico. It has no dependencies. The mark is drawn from straight-line polygons, so a scanline fill, a box filter for antialiasing and a minimal PNG encoder are all it needs.

That paid off the next day. I simplified the mark to a plain black e on white, scaled up so it stays legible at 16 pixels, and the whole set regenerated in one command, with no chance of one file being left behind.

Then wait, and do not keep changing it

Google says recrawling can take anywhere from several days to several weeks. You can prompt it by requesting indexing of your home page in Search Console's URL Inspection tool, and then the useful thing to do is nothing: the guidelines also ask for a stable favicon URL, so renaming files while you wait works against you. As I write this, the fix is two days old, well inside that window.

A checklist for your own site

1. Serve a real /favicon.ico at the root, with 48, 32 and 16 pixel images.
2. Declare an ICO or PNG with rel="icon". An SVG is a fine extra, never the only one.
3. Make the apple-touch-icon the same mark. Google may use it.
4. Keep every icon square; larger than 48x48 is recommended.
5. Check robots.txt does not block the icon files or the home page.
6. Generate every size from one source file, so they cannot drift apart again.
7. Request indexing of the home page, then leave it alone.

It is the same lesson as the schema AI crawlers could not see on this site: the browser showed me one thing, and the crawler read another. Check what you actually serve, not what your own screen shows you.

Frequently asked questions