The Complete Favicon Guide for Web Developers (2026)

May 8, 2026 7 min read Development, SEO

A favicon is one of those small details that separates a professional website from an amateur one. It's the tiny icon in browser tabs, bookmarks and mobile home screens — and getting it right matters more than most developers think.

What Sizes Do You Actually Need?

Modern browsers and devices expect multiple favicon sizes. Here's the complete list:

16×16 — Browser tab (classic favicon)
32×32 — Windows taskbar, newer browser tabs
48×48 — Windows desktop shortcut
64×64 — Windows site icons
96×96 — Google TV, ChromeOS
128×128 — Chrome web store
180×180 — Apple Touch icon (iOS home screen)
192×192 — Android Chrome (PWA icon)
256×256 — Windows 10 start tiles
512×512 — PWA splash screen, Google requirements

ICO vs PNG — Which Format?

ICO is the traditional format — it can contain multiple sizes in one file (16, 32, 48). Every browser supports it. Use it for maximum compatibility.

PNG is modern and cleaner. Use individual PNG files for specific sizes alongside an ICO fallback.

SVG is the newest approach — a single SVG file that scales to any size. Supported in modern browsers but not universally.

The HTML Code You Need

<!-- Classic favicon -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- Modern PNG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

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

<!-- Android / PWA -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

How to Generate All Sizes Instantly

Go to the Favicon Generator
Upload your logo image or create a text-based favicon with custom colors
Preview all 10 sizes instantly
Download individual PNGs or a combined ICO file
Copy the HTML code and paste it into your <head>

SEO Impact of Favicons

Google shows favicons in mobile search results next to your URL. A missing or broken favicon makes your site look unprofessional and can reduce click-through rates. Having a proper favicon is a small but real ranking signal.

⚡ Generate Your Favicon in 10 Seconds

From image or text — get ICO, all PNG sizes, and ready-to-paste HTML code. Free, no login.

Create Favicon Free →

The PWA manifest and why it matters more than ever

If you only ship a favicon.ico and call it done, you're missing one of the most important pieces of modern favicon setup: the web app manifest. The site.webmanifest file is what defines your site as an installable progressive web app (PWA). When a user adds your site to their home screen on Android or iOS, the manifest tells the OS which icon to use, what name to display, what color the splash screen should be, and how the standalone view should behave.

A complete manifest looks like this:

{
  "name": "Easy Press Pro",
  "short_name": "EasyPress",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0f6fff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Without this, users adding your site to their phone home screen get a generic icon and a worse experience. With it, they get a proper app-like shortcut that respects your brand.

Why your favicon won't appear after install — and how to actually fix it

Almost every developer has had this experience: replace the favicon, refresh the browser, see the old one. Hard-refresh, see the old one. Open incognito mode, finally see the new one. So what's happening?

Browsers cache favicons very aggressively — often more aggressively than other resources. Chrome and Firefox both keep favicons in a separate cache that survives normal page reloads. The fixes that actually work, in order:

Hard refresh (Ctrl+Shift+R / Cmd+Shift+R) — clears most of the page cache but sometimes not the favicon
Open the favicon URL directly (e.g., yoursite.com/favicon.ico) and refresh that page — forces a re-fetch
Clear browser cache for the site via DevTools → Application → Clear storage
Append a query string to the favicon URL in HTML: href="/favicon.ico?v=2" — forces browsers to treat it as a new resource
Wait an hour — sometimes that's actually the fastest fix once you've verified it loads in a fresh browser

Dark-mode favicons (the modern technique)

A surprisingly modern problem: your favicon looks great in browser tabs on light themes but disappears against the dark tab bar of users in dark mode. The fix is the prefers-color-scheme media query built into SVG favicons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #0f172a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #f8fafc; }
    }
  </style>
  <path d="..."/>
</svg>

This makes your favicon automatically adjust to the user's color scheme, so it's always visible regardless of theme. PNG favicons can't do this — they're static — so SVG is the way to go for modern, adaptive favicons.

Animated and badged favicons (and when not to use them)

Modern browsers support animated favicons (via GIF or canvas-rendered SVG that you update in JavaScript). They get attention. Whether they're a good idea is a different question.

The legitimate use cases: showing a notification badge count (like Gmail does), indicating live status (recording, in-call), or reflecting active state (paused/playing). Used sparingly for genuine status information, these are useful.

The bad use cases: pure decoration, marketing animation, or attention-grabbing motion. Animated favicons can be distracting and accessibility-unfriendly for users with vestibular sensitivities. They also reset every time the user switches tabs, which is more annoying than impressive.

If you do animate, follow the prefers-reduced-motion setting and keep animations subtle.