Favicons in search results: format, size, and setup

How search engines find a site’s icon, the formats and sizes Google accepts, and how to fix an icon that doesn’t show.

A favicon is the small icon that stands for a site. Browsers show it in tabs and bookmarks, and Google shows it beside the site’s name in search results.

Google uses one icon for a whole site, taken from the home page, so every page of the site shares it.

What SignalDNS checks

Google’s favicon guide says it supports one favicon per hostname: www.example.com and shop.example.com can differ, but www.example.com/news shares the one for www.example.com. So whatever page you audit, we read icon links from the home page on its hostname, and name that page when it isn’t the one you audited.

We look for the <link> types Google reads: icon (including the older shortcut icon), apple-touch-icon, and apple-touch-icon-precomposed. Google’s guide doesn’t say how it chooses between several, so we pick one this way:

  1. Skip SVG icons, by an address ending in .svg or a type that mentions SVG.
  2. Of the rest, take the first whose sizes declares a square of 48 × 48 px or more, or else the first one.
  3. If the home page links only SVG icons, take the first.
  4. If it links none, use /favicon.ico, the address browsers may try when a page declares no icon.

We fetch that file (up to 64 KiB, three redirects, five seconds) and read its format and pixel size from its own bytes, whatever its content type or extension says. The search preview shows it from our server, so your browser never contacts the site.

What the link tags look like

In the <head> of the home page, https://www.example.com/:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon-96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
  • We’d pick icon-96.png, the first non-SVG icon declared at 48 × 48 px or more. Browsers that support SVG icons can use icon.svg.
  • The href can be relative or absolute, and Google’s guide says the file can be on another host, such as a CDN.
  • Keep the address stable. Google asks you not to change it often.
  • Googlebot must be able to crawl the home page, and Googlebot-Image the icon file. See robots.txt.

The icon doesn’t load

The icon we picked didn’t load as an image. Either the server answered with an error, such as 404 because there’s no /favicon.ico, or it answered 200 with something that isn’t an image, such as an HTML page. SignalDNS marks this as needing attention.

If the request failed outright, such as a timeout, the answer is “couldn’t check”, which isn’t counted as a failure.

How to fix it: create a square PNG or ICO, larger than 48 × 48 px, upload it, and link it from the home page’s <head>:

<link rel="icon" href="/icon-96.png" type="image/png" sizes="96x96">

Open the icon’s address in a browser to check it shows the image itself. Browsers may try /favicon.ico when there’s no link, but Google’s guide asks for a <link> tag on the home page, so add one even if that file exists.

Google may not accept the icon’s format

Google’s guide lists the formats it supports: BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF. It doesn’t list SVG or WebP, so an icon in either may not show in results. SignalDNS marks an SVG or WebP icon as needing attention. ICO, PNG, GIF, JPEG, and BMP files are OK.

Since we skip SVG links when there’s anything else, this usually means the home page links only SVG icons, an icon’s file is really an SVG, or it’s a WebP.

How to fix it: keep the SVG for browsers if you like, and add a square PNG or ICO as well:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/icon-96.png" type="image/png" sizes="96x96">

The icon isn’t square or is very small

Google’s guide says a favicon must be square and at least 8 × 8 px, and recommends larger than 48 × 48 px so it looks good everywhere it’s shown.

We read pixel sizes from the file: the header of a PNG, GIF, BMP, or JPEG, and every image inside an ICO. SVG and WebP files don’t give us a size, so for those we use the link’s sizes attribute. Then:

  • If no size is a square of at least 8 × 8 px, it needs attention. An ICO passes if any image inside it does.
  • A square of 8 × 8 px or more is OK. If the largest is 48 × 48 px or smaller, we add Google’s recommendation for larger, without flagging it.
  • If we can’t find a size at all, it isn’t judged.

How to fix it: export a square image, such as 96 × 96 or 192 × 192 px, and declare its size:

<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">

When a new icon shows in results

Google has to recrawl and process your home page before it uses a new icon. Its guide says crawling can take anywhere from several days to several weeks. You can ask Google to recrawl the home page with the URL Inspection tool in Search Console.

A favicon isn’t guaranteed to appear even when every guideline is met, and Google replaces an icon it deems inappropriate with a default one. Our audit fetches the icon again every time, so it shows a change as soon as it’s live.

Setting it up in your CMS or framework

What we can’t tell from outside

We can’t see whether Google shows your icon. We don’t check robots.txt for Googlebot-Image, or judge whether the icon represents your brand or is appropriate. Icon links added by JavaScript aren’t seen. We don’t read PPM or TIFF files, so an icon in one of those formats, which Google accepts, is reported as not loading as an image.

Sources

Last reviewed .