Favicon Sizes & Browser Support Guide (2026)

In this guide

Favicon size reference

There is no single universal favicon size because the browser or operating system chooses an icon for a particular display context. The table below is a practical web-development reference rather than a claim that every platform requires every file.

Exact display sizes can change across browsers and operating systems. The goal is to provide a small set of clean source assets that give the browser enough appropriate choices rather than exporting dozens of arbitrary sizes.

Browser favicon HTML: a clean baseline

HTML uses <link rel="icon"> to associate icon resources with the current document. When several icon links are available, browsers can use attributes such as type and sizes to choose a suitable resource.

A practical head setup looks like this:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2563eb">

You do not need the old rel="shortcut icon" pattern. Modern HTML uses rel="icon".

Browser support: which icon mechanism is used?

Modern desktop and mobile browsers understand the standard rel="icon" relationship, but not every surface uses the same mechanism. Treat favicon support as a set of related contexts rather than one file that controls everything.

Do not assume that seeing the new icon in one browser proves every other surface is updated. Browser cache, home-screen icons, PWA installs and search crawlers can refresh on different schedules.

Favicons in Google Search

Google Search can show a site's favicon next to a result, but the search favicon has its own requirements. Google's current documentation says the favicon must be square, at least 8×8 pixels, and recommends using an icon larger than 48×48 pixels so it looks good across search surfaces.

• Use a 1:1 square favicon.
• Prefer an asset larger than 48×48 for the search-oriented source.
• Make sure Googlebot can crawl the home page and Googlebot-Image can crawl the favicon file.
• Keep the favicon URL stable instead of changing it frequently.
• Use a visually recognizable brand mark rather than tiny text or detailed artwork.

Google applies one favicon per hostname. A subdirectory such as example.com/blog/ cannot have an independent Google Search favicon from the rest of example.com, while a separate subdomain is a separate hostname.

Apple touch icons for iPhone and iPad

iOS uses the non-standard apple-touch-icon relationship for home-screen Web Clips rather than relying only on the normal rel="icon" links. A common practical setup is a 180×180 PNG:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Apple's web-content guidance also supports placing apple-touch-icon.png at the site root. For a simple site, one clean large touch icon is easier to maintain than a long list of device-specific assets.

For predictable appearance, use a square source with enough breathing room around the logo. A deliberate solid background is often safer than assuming transparent areas will look the same across every home-screen treatment.

PWA icons and maskable icons

If your website is installable as a Progressive Web App, define icons in the web app manifest. The manifest icons member accepts an array of icon resources with fields such as src, sizes, type and purpose.

A compact example:

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone"
}

Why maskable icons need different artwork

Operating systems can crop app icons into circles, rounded squares or other shapes. MDN describes the guaranteed maskable safe zone as a circle whose diameter is 80% of the icon's minimum dimension. Keep important logo details within that safe area, and use an opaque background that fills the full icon canvas.

Do not label a normal transparent icon as maskable unless the artwork was actually designed for masking. Otherwise it may be cropped too tightly or look visually inconsistent.

Design and source-image tips

• Start large: use a square source around 512×512 or larger when possible. Downscaling is much safer than trying to restore detail from a tiny logo.
• Remove tiny text: a wordmark that looks good at 512 pixels can become unreadable at 16 pixels. A simple symbol or initial often works better.
• Use strong contrast: test the icon on both light and dark browser chrome.
• Keep edge padding: artwork that touches every edge is more likely to feel cramped or get cropped on adaptive-icon surfaces.
• Preview at actual size: inspect 16×16, 32×32 and 48×48 versions instead of judging only the large master image.
• Keep one visual identity: browser, Apple and PWA variants should still look like the same brand even if their padding or background differs.

If your source needs resizing before export, use the Image Resizer. If the file is in an inconvenient format, use the Image Format Converter.

Favicon launch testing checklist

• Open the favicon URLs directly and confirm they return an image, not a 404 page.
• Check the site in current Chrome, Firefox and Safari.
• Test at least one mobile browser if the site has meaningful mobile traffic.
• Inspect the 16×16 and 32×32 icon at actual size for legibility.
• Confirm the Apple touch icon link points to the intended file.
• If using a PWA manifest, validate that its JSON loads and all icon paths resolve.
• Preview maskable artwork to make sure critical content stays inside the safe zone.
• Keep favicon files crawlable if you want Google Search to use them.
• After replacement, hard-refresh or test in a fresh browser profile before assuming the new file failed.

A working favicon is partly an asset problem and partly an integration problem. Correct image dimensions do not help if the path is broken, the manifest points somewhere else, or an old cached icon is still being displayed.

Frequently asked questions

Is 32×32 enough for a favicon?

It can be enough for a browser tab, but one 32×32 file is not an ideal all-purpose package. A larger square asset helps with search, touch icons and installable app surfaces.

Do I still need favicon.ico?

Modern browsers can use PNG, SVG and other supported resources through rel="icon", so ICO is not the only option. Keeping a multi-size favicon.ico is still a simple compatibility measure and costs very little.

Should I use SVG for the favicon?

SVG can scale cleanly and is useful when your mark remains readable at small sizes. Raster PNG/ICO fallbacks are still practical when you want predictable small-size rendering and broad coverage.

Why does Google still show my old favicon?

Google needs to recrawl the home page and favicon resource, and favicon updates are not necessarily reflected immediately. Keep the URL stable, make sure it is crawlable, and allow time for recrawling.

Do I need a web app manifest for a normal website?

No. A manifest is mainly relevant when you want installable PWA behavior or other app metadata. Normal browser favicons can work with standard icon links alone.

Generate the files instead of resizing them one by one

The ToolStrive Favicon Generator creates a practical icon package from one PNG, JPG or WebP image. It includes multi-size ICO output, PNG browser icons, a 180×180 Apple touch icon, 192×192 and 512×512 PWA icons, a maskable icon, a web app manifest and ready-to-copy HTML.

Sources and standards

This guide was checked against current official documentation on September 24, 2026. Platform behavior can change, so use these sources when you need the latest implementation details.

• Google Search Central — Define a favicon to show in search results
• MDN — HTML rel="icon"
• MDN — Define app icons for PWAs
• Apple Developer — Configuring Web Applications / Web Clip icons