Open Google, search for your brand, and look closely at the icon next to your page title. If it looks fuzzy, pixelated, or stretched, you're probably serving a low-resolution favicon that Google is upscaling. This is exactly the problem the PNG favicon 96x96 pattern solves — and it's the same two-times-downsample logic Google uses internally to choose the sharpest candidate.

What a 96x96 PNG Favicon Actually Is

A 96x96 PNG favicon is a square raster image, 96 pixels wide and 96 pixels tall, served with the image/png MIME type. The 96-pixel dimension is not arbitrary: it's exactly 2x the 48-pixel CSS size that Google Search uses to render the icon next to your page title in desktop results.

When a browser or search engine needs to draw a 48x48 icon and your source PNG is 96x96, the downsampling produces crisp edges and clean anti-aliasing. When your source is 16x16 and gets upsampled to 48x48, you get blur. The 96x96 size sits in a sweet spot — small enough to keep file size well under 10 KB, large enough to feed every common rendering target without quality loss.

Why This Size Matters for Google Search

According to Google's official favicon documentation, a favicon is eligible (not guaranteed) to appear in search results if Google can crawl it, it's square, and it's at least 8x8 pixels. Google recommends going larger than 48x48.

A 96x96 PNG lands inside that recommended range and is exactly twice the display size, which gives Google's renderer a clean downsample. Google's crawler also picks the largest valid square image it finds among your <link rel="icon"> declarations and your root favicon.ico — a 96x96 PNG often wins that selection, and once chosen, it's what users see in SERPs. To see how 96x96 fits among other common sizes, check our complete favicon sizes guide.

How the sizes Attribute Tells Browsers What to Use

The HTML spec gives browsers a hint about which icon to load through the sizes attribute on the <link rel="icon"> tag. As defined in the WHATWG HTML standard, when a user agent needs an icon at a specific size — say, 48x48 for a Google result or 32x32 for a Windows taskbar pin — it picks the declared icon whose sizes value matches or exceeds the target.

Here's the canonical pattern for declaring a 96x96 PNG favicon:

&lt;link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'&gt;

Note the exact format: "96x96", lowercase, with the x separator. Browsers ignore "96", "96 X 96", or any whitespace variant.

Practical Implementation: The Full Stack

Shipping a 96x96 PNG alone isn't enough — modern browsers expect a layered set of icons. A typical <head> block looks like this:

&lt;link rel='icon' type='image/svg+xml' href='/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'&gt;
&lt;link rel='icon' type='image/png' sizes='32x32' href='/favicons/favicon-32x32.png'&gt;
&lt;link rel='apple-touch-icon' sizes='180x180' href='/favicons/apple-touch-icon.png'&gt;
&lt;link rel='shortcut icon' href='/favicon.ico'&gt;

Order matters: put larger, higher-priority icons first. Browsers stop at the first sizes match they need. The favicon.ico at the root handles ancient browsers and curl-style scrapers that probe the file directly.

Best Practices for the 96x96 PNG

When 96x96 Isn't the Right Answer

If you're building a PWA or need an Android home-screen icon, the site.webmanifest asks for 192x192 and 512x512 PNGs — those are the sizes the platform actually uses. For that scenario, follow our web app manifest icon setup guide. For browser tabs, address bars, and Google search results, however, 96x96 paired with an SVG is the crispest realistic configuration.

Recommendation

Serve a real 96x96 PNG — not an upscaled smaller file — declared with sizes='96x96' on its own <link> tag. Combine it with an SVG primary, a 32x32 PNG fallback, and a root favicon.ico. That stack satisfies Google's "larger than 48x48" recommendation, looks sharp in search results, and degrades gracefully on legacy browsers.