Favicon Sizes and Formats

A modern website needs a few different icon files to meet the rules of both Google Search and browsers. Google Search, in particular, has its own requirements that a favicon must meet before it can appear next to a site in search results.

What Google Search Will Show

According to Google's favicon documentation, the favicon is declared with a <link> tag in the header of the home page, for example <link rel="icon" href="/path/to/favicon.ico">. Google reads the rel values icon, shortcut icon, apple-touch-icon and apple-touch-icon-precomposed, and the href can be relative, absolute or even on a CDN. Google Search supports only one favicon per site, where a site is defined by the hostname: www.example.com and news.example.com can have different icons, but a subdirectory such as example.com/news cannot.

The guidelines are short:

• the favicon must be square (1:1 aspect ratio) and at least 8x8 px; Google recommends larger than 48x48 px so it looks good on various surfaces;
• supported file formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF;
• Googlebot-Image must be able to crawl the favicon file and Googlebot must be able to crawl the home page, so neither can be blocked in robots.txt;
• the favicon URL must be stable, not changed frequently, and the icon should visually represent the site's brand.

SVG is not on Google's list, so a site that uses an SVG icon for browsers should also declare a PNG or ICO file.

What Browsers Read from HTML

Browsers use the same rel="icon" tag. Per MDN, when several icons are declared, the browser picks the most appropriate one from their media, type and sizes attributes, and moves on to the next if a format turns out to be unsupported. MDN also notes that iOS ignores rel="icon" for home-screen icons and uses the non-standard apple-touch-icon instead. A practical set looks like this:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

A favicon.ico in the site root still serves as a fallback, since the HTML standard lets browsers request /favicon.ico when a page declares no icon. An SVG icon stays sharp at any size and weighs little; caniuse data shows SVG favicons working in current Chrome, Edge, Firefox and Safari, though older Safari versions ignore them and the file must be served as image/svg+xml. Apple's web app documentation lists a 180x180 apple-touch-icon for high-resolution iPhones, and a PNG of that size is a common single choice. For installable sites, web.dev states that Chromium browsers need at least a 192x192 px and a 512x512 px icon in the web app manifest.

How to Debug a Missing Favicon

If the favicon does not appear in Google Search, first check the basics: the <link> tag is on the home page itself, the icon file opens in a browser at its URL and returns a normal 200 response, and robots.txt does not block the file or the home page. Confirm the image is square and uses a supported format. Then use the URL Inspection tool in Search Console to request indexing of the home page. Crawling can take anywhere from several days to several weeks, so do not keep renaming or moving the file while waiting, since a stable URL is one of the requirements. Menu names in Search Console can change.

Even when every guideline is met, Google says a favicon is not guaranteed to appear, and it replaces icons it deems inappropriate with a default one. Older advice that the icon size must be a multiple of 48 px does not match the current documentation, which sets only the square shape and the 8x8 px minimum.