The Complete Favicon Size Guide (and Why You Need More Than One)

If your favicon is a single 16x16 ICO file dropped in your site root, you're shipping an incomplete site. Modern browsers, mobile devices, search engines, PWAs, and AI citation tools all expect different favicon sizes — and serving the wrong one (or none) hurts your brand visibility in places you might not even be checking.

This guide breaks down every favicon size you actually need in 2026, where each one shows up, the HTML you need to wire them all up, and a fast way to generate every size from a single source image. No upload-to-some-shady-server, no signups, no zip files of mystery contents.

What Is a Favicon?

A favicon — short for "favorite icon" — is the small image that represents your website in browser tabs, bookmarks, search results, and a dozen other places. It's the visual shorthand for your brand on the web. When someone has 30 tabs open, your favicon is what helps them find yours. When Google or Perplexity cites your site, your favicon is what makes that citation look professional instead of generic.

Favicons started as 16x16 pixel ICO files in 1999. The web has gotten more complex since then. Today, browsers, operating systems, and platforms all request different sizes for different contexts, and there's no longer one file that covers everything.

What Does Google Officially Say About Favicons?

Google has actual published guidelines for favicons in search results, and they've been updated several times as the SERP layout evolved. Here are the highlights, straight from Google.

Google's Official Favicon Requirements

From Google Search Central's favicon documentation, the current technical requirements are:

"Your favicon must be a square (1:1 aspect ratio) that's at least 8x8px. While the minimum size is 8x8px, we recommend using a favicon that's larger than 48x48px so that it looks good on various surfaces."

Google also requires that:

• The favicon URL must be stable — don't change it frequently
• Googlebot and Googlebot-Image must be able to crawl both the favicon and your home page
• The favicon must be a "visual representation of your website" — no inappropriate content, no offensive imagery
• Any valid favicon format works — ICO, PNG, GIF, JPEG, SVG

The Timeline of Google Favicon Updates

• May 2019 — Google started displaying favicons next to mobile search results, alongside a redesigned snippet format with a black "Ad" label.
• October 2022 — Google rolled out site names and favicon updates to mobile search results in English, French, Japanese, and German.
• 2023 — Google rolled out site names, favicons, and the "Sponsored" label format to desktop search results.
• October 2024 — Google updated its favicon documentation to officially recommend favicons larger than 48x48 pixels for the best appearance across surfaces. The minimum requirement of 8x8 was retained but the recommendation was strengthened.

The takeaway: Google has been progressively making favicons more important to your search visibility for the better part of seven years. If you're still shipping a 16x16 favicon as your only file, you're behind.

Why You Can't Just Use One Favicon Size

Here's the short list of reasons a single favicon doesn't cut it anymore:

• Different browsers request different sizes. Chrome on a 4K monitor wants a different size than Safari on an iPhone.
• Retina and high-DPI displays need 2x or 3x the pixel density to look sharp. A 16x16 favicon looks blurry on a Retina display.
• iOS and Android home screens use entirely different favicon formats — Apple Touch Icons (180x180) for iOS, manifest-based icons for Android.
• Progressive Web Apps require much larger sizes — 192x192 and 512x512 — for install prompts and splash screens.
• Google's search results have shown favicons next to mobile listings since 2019 and desktop since 2023. Google's official guidelines now recommend favicons of at least 48x48 pixels.
• AI citation tools — ChatGPT Search, Perplexity, Google AI Overviews, Claude with web search, Microsoft Copilot — all display favicons next to source citations. A missing or low-quality favicon makes your citation look unbranded.

The Complete List of Favicon Sizes You Actually Need

Here's every favicon size you should have, shown side-by-side at their actual rendering sizes so you can see just how dramatic the difference is between a 16x16 favicon and a 256x256 one.

Now here's what each size is actually used for:

16x16

Used for: Browser tabs (the classic favicon use case), bookmarks bar, browser history. Status: Required. This is the OG favicon size and every browser falls back to it.

32x32

Used for: Retina browser tabs, Windows taskbar shortcuts, browser bookmarks bar on high-DPI displays, browser autocomplete suggestions. Status: Required. Without this, your favicon looks blurry on most modern displays.

48x48

Used for: Windows site shortcuts, browser tile icons. Google now specifically recommends a favicon of at least 48x48 for search results visibility. Status: Required if you care about Google SERP appearance.

64x64

Used for: Higher-DPI desktop icons, browser tabs on 4K and 5K monitors, certain notification UIs. Status: Recommended. Becoming more important as 4K displays go mainstream.

128x128

Used for: Chrome Web Store listings, browser extension icons, Windows tile icons, larger ICO multi-size catch-all. Status: Recommended.

180x180 (Apple Touch Icon)

Used for: The icon iOS uses when someone adds your site to their home screen. Without it, iOS shows a blurry screenshot of your page instead. Status: Required if you have any iOS users (which you do). Note: this isn't an ICO — it's a separate PNG file you reference with <link rel="apple-touch-icon">.

192x192 (Android / PWA)

Used for: Android Chrome PWA install icon, Android home screen shortcuts. Status: Required for Progressive Web Apps. Referenced from your site.webmanifest file.

256x256

Used for: Larger ICO multi-size entry, Windows desktop shortcuts at high zoom levels, app icon contexts. Status: Recommended.

512x512 (PWA Splash)

Used for: PWA splash screens, Android adaptive icons, modern app store thumbnails. Status: Required for Progressive Web Apps. Referenced from your site.webmanifest.

SVG (Any Size)

Used for: Modern browsers (Chrome 80+, Firefox, Safari 13+) that prefer scalable vector favicons. Crisp at any zoom level, supports dark mode via media queries. Status: Bonus. Not required, but nice to have. SVG favicons can adapt to dark/light themes automatically using prefers-color-scheme.

The HTML You Actually Need

Here's a copy-paste-ready snippet to wire up all the favicon sizes correctly. Drop it in your <head> tag:

<!-- Standard favicon (legacy fallback) -->
<link rel="icon" href="/favicon.ico">

<!-- Modern PNG favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">

<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- SVG favicon (modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Web app manifest (PWA, Android home screen) -->
<link rel="manifest" href="/site.webmanifest">

Browsers pick the best match for their context. They'll grab the SVG if they support it, fall back to the highest-resolution PNG, and use the ICO as a last resort.

The Web App Manifest (For PWAs and Android)

The site.webmanifest file ties together your larger favicon sizes for Progressive Web Apps and Android home screen shortcuts. A minimal manifest looks like this:

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#7C3AED",
  "background_color": "#141420",
  "display": "standalone"
}

If you skip this, Android users who try to install your site as a PWA will get a generic icon instead of your branded favicon. That's a missed branding opportunity for the small but growing chunk of users who do install web apps.

Generate All Your Favicon Sizes in One Click

Generating six different favicon sizes by hand in Photoshop or Figma is exactly as fun as it sounds. The fastest way to do it is with Favicon Converter — a Windows desktop app that turns any image into pixel-perfect ICO favicon files in seconds.

You drag in any image (PNG, JPG, JPEG, SVG, or WebP), preview it instantly at all six standard sizes (16, 32, 48, 64, 128, and 256), and click convert. Each size gets exported as its own ICO file ready to drop into your site. The app also includes a few useful pre-conversion tools: trim whitespace automatically removes transparent or white padding so your icon fills the favicon square edge-to-edge, and a scale slider lets you zoom in to crop the frame exactly how you want.

The big difference vs online favicon generators: everything happens locally on your machine. No uploads, no waiting, no zip files, no watermarks, no account, no subscription. Works completely offline once installed. Your source images never leave your computer — important if you're working on confidential client logos or unreleased branding.

It's Windows-only (Windows 10 version 2004+ or Windows 11). Grab it on the Microsoft Store.

For the larger sizes (180x180 Apple Touch, 192/512 PWA, SVG), you'll want to also export those from your design tool of choice or use a complementary online generator. The 6 ICO sizes Favicon Converter generates cover the bulk of browser/desktop needs — pair it with manual exports for the mobile/PWA bits.

Common Favicon Mistakes (And How to Fix Them)

If you only do one audit on your site this week, make it your favicon setup. Here are the mistakes we see constantly:

1. Using Only a Single 16x16 Favicon

By far the most common one. You ship a favicon.ico, call it done, and never think about it again. Result: blurry on Retina, missing from Apple home screens, generic icon in PWAs, low-quality in Google search results. Adding even just 32x32 and an Apple Touch Icon takes 10 minutes and dramatically improves how your site looks across devices.

2. No Apple Touch Icon

When iOS users add your site to their home screen and you don't have an Apple Touch Icon, iOS generates a blurry, zoomed-in screenshot of your page as the icon. It looks terrible and screams "this site doesn't care about details." Drop a 180x180 PNG and reference it with <link rel="apple-touch-icon">.

3. Low-Resolution Images Upscaled to 256x256

Starting with a 100x100 logo and exporting it at 256x256 results in a blurry, pixelated mess. Always start with a high-resolution source image (512x512 minimum) and let your converter scale it down. Going up never works.

4. Forgetting the Web App Manifest

You have your favicons, but no site.webmanifest. Android Chrome falls back to lower-quality icons or a generic globe when users try to install your site as a PWA. The manifest is a five-minute addition that future-proofs your icons for app contexts.

5. Using JPG Instead of PNG

JPGs don't support transparency. If your logo is on a transparent background, save your favicons as PNG (or SVG, or ICO). JPG favicons end up with white or colored boxes around them on tabs that don't match your design.

6. Skipping the SVG Version

SVG favicons scale perfectly to any size, support dark mode automatically with prefers-color-scheme, and are supported by every major modern browser. Adding one is a single line of HTML and gets you crisp icons everywhere.

7. Too Much Detail at Small Sizes

Favicons are tiny. Detailed logos with text or thin lines look fine at 256x256 but turn into mush at 16x16. Use bold, simple shapes that read clearly even when scaled down. Test by zooming out to actual size before shipping.

Why Favicons Matter More in 2026 Than Ever

Favicons used to be one of those small details you shipped once and forgot about. In 2026, they're a brand visibility signal that shows up in surprising places.

Google added favicons to mobile search results in 2019 and to desktop search results in 2023. Today, every search results page on every device shows your favicon next to your domain name. Sites without a favicon get a generic globe icon — which signals "low quality" or "abandoned" to users scanning the results.

The bigger shift is happening in AI search. ChatGPT Search, Perplexity, Google AI Overviews, Claude with web search, and Microsoft Copilot all display source citations with favicons next to the domain name. As organic search traffic shifts toward AI-mediated answers, your favicon becomes your brand's visual signature in that new ecosystem. Users skim AI citations the same way they skim Google results — by visual recognition. A clean, recognizable favicon means more clicks. A missing favicon means competitors with branded icons win the click instead of you.

It's not a huge effect on its own, but combined with other small trust signals (HTTPS, fast load times, clean URLs, valid HTML), it adds up. If you're competing in a crowded niche, every visual signal counts.

Quick Checklist

Run through this list to make sure your favicon setup is complete:

• 16x16 PNG favicon — required
• 32x32 PNG favicon — required
• 48x48 PNG favicon — required for Google search visibility
• 64x64, 128x128, 256x256 PNG favicons — recommended
• 180x180 Apple Touch Icon — required for iOS
• 192x192 and 512x512 PNG favicons — required for PWAs
• SVG favicon — bonus, but adds dark mode support
• favicon.ico (multi-size, legacy fallback) — recommended
• site.webmanifest — required for PWAs and Android
• All favicons referenced correctly in your <head> with <link rel="icon"> and <link rel="apple-touch-icon"> tags
• Test on iOS, Android, desktop, and in Google's Search Console URL Inspection tool

Related Reading

While you're cleaning up your favicon setup, two other technical SEO wins are worth tackling at the same time. Check out our guide to whether HTML validation still matters for SEO in 2026 and our guide to compressing images without losing quality — both pair well with proper favicon setup as part of a full technical audit.

Bottom Line

One favicon isn't enough anymore. Modern websites need at least 6-8 different sizes to look right across browsers, mobile devices, search engines, and AI citation tools. The good news: it's a one-time setup. Generate all the sizes once, drop them in your site root, reference them in your HTML, and forget about it. The payoff shows up in how professional your site looks every time it appears anywhere on the web.

Sources: Google Search Central — Define a Favicon to Show in Search Results, Google Search Central — Search Appearance Documentation, Google Search Central — Documentation Updates, web.dev — Add a Web App Manifest, MDN Web Docs — <link> Element Reference, MDN Web Docs — Web App Manifest.