We launched DashUtils on 19 October 2026. Pages were showing up in Google within a day or two, but every result had the same grey globe where our icon should have been.

The favicon was set up correctly from day one, and we didn't change anything. About 12 days after launch, our icon replaced the globe on every result at once. Google's own favicon service had already fetched the icon before it appeared, so the wait was Google refreshing its results, not a mistake on our side.

Most of the advice we found while waiting was out of date or wrong. Here's the short version of what actually matters, checked against Google's current documentation.

What Google actually requires

From Google's favicon guidelines:

• Square, at least 8 × 8 px. Google recommends larger than 48 × 48. The "must be a multiple of 48" rule you'll see in older posts isn't in the current docs.
• BMP, GIF, ICO, PNG, JPEG, PPM or TIFF. SVG isn't on the list. If your only icon is an SVG, browsers will show it in tabs but Google Search won't.
• On the home page. Google reads the favicon from your home page, one per hostname.
• Crawlable. Googlebot must be able to fetch the home page and Googlebot-Image the icon. Check that robots.txt doesn't block the icon or its folder.
• A stable URL. Don't keep moving the file.

The set of files that covers everything

Start from a square PNG of at least 512 × 512 px. Shrinking a large image stays sharp; enlarging a small one goes blurry.

An ICO is a container holding several sizes of the same picture, and the browser picks the best one for each place. Ours holds 16, 32 and 48 px and weighs about 4 KB, so there's no performance reason to skip it.

Two design tips for the source image:

• Keep it simple. At 16 px you have 256 pixels to work with. A bold symbol or one letter survives; a full wordmark doesn't.
• Check it on light and dark backgrounds. A dark logo on a transparent background can disappear in dark mode. A solid rounded square behind the symbol looks the same everywhere.

The HTML

Put the files at the root of your site and add this to the <head>:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Relative paths are fine; Google accepts relative, absolute or CDN URLs.

Next.js (App Router): skip the HTML. Put favicon.ico, icon.png and apple-icon.png in the app folder and Next.js adds the tags for you. That's what we do.

WordPress: Appearance › Customize › Site Identity › Site Icon, and upload a 512 × 512 PNG.

Then request indexing and wait

In Search Console, inspect your home page with URL Inspection and click Request indexing. Google says a recrawl takes several days to several weeks, and a favicon isn't guaranteed even when everything is right. Ours took 12 days.

If you still see a globe after a few weeks, check:

1. The <link rel="icon"> tag is in your home page's HTML (view the source, not just the tab).
2. The icon URL loads directly, with no redirect or login.
3. robots.txt doesn't block it.
4. It's square and not an SVG.

Making the files

We built two free tools for this, and both run in your browser, so your logo isn't uploaded anywhere:

• Favicon generator: one image in, the full set above out, plus the HTML.
• PNG to ICO converter: just the .ico, with the sizes you choose (16 to 256 px).

The full guide on our site also covers transparent backgrounds, Shopify, Wix and Squarespace, and a longer FAQ.