What's the difference between favicon.ico and favicon.png?

ICO is a multi-size container format, a single .ico file holds multiple resolutions (16, 32, 48 px) so the OS picks the right one automatically. PNG is single-resolution. ICO is required for legacy compatibility (Windows shortcuts, old Internet Explorer), PNG is preferred by modern browsers. Best practice: ship both, plus SVG for the future.

Do I still need .ico in 2026?

Yes, for full compatibility. Modern browsers prefer PNG/SVG, but Windows desktop shortcuts, Outlook signatures, and some legacy systems still need .ico. Generate all formats with a single tool, it costs nothing and avoids edge-case bugs.

What sizes should a favicon include?

Minimum: 16×16 (browser tab), 32×32 (taskbar), 180×180 (Apple Touch Icon for iOS home screen), 192×192 + 512×512 (Android Chrome and PWA). For ICO container: 16, 32, 48. SVG is resolution-independent so size doesn't apply.

How do I install the favicon on my website?

Place files in your site root, add these tags inside : , , , . The favicon generator gives you the exact snippet ready to paste.

IMAGE

Favicon Generator: The Complete .ICO Guide (2026)

Everything you need to know to create a professional favicon: ICO vs PNG vs SVG, multi-size containers, Apple Touch Icons, Android manifest, dark mode, and HTML installation.

DuneTools · April 26, 2026 · 9 min read

The favicon, that tiny 16×16 pixel icon next to your tab title, is one of the most-overlooked details on the web. Most sites either ship no favicon (showing a generic browser icon, the universal tell of an unfinished site) or ship a JPEG renamed to .ico (which doesn’t work consistently across browsers).

This guide covers what a proper 2026 favicon implementation looks like: the formats you need, the sizes that matter, dark mode support, and how to install it correctly. Everything generated locally, your logo never uploaded to a server.

Why favicons matter more than you think

A favicon does three things simultaneously:

Identifies your site in browser tabs, bookmarks and history.
Boosts brand recognition when users have multiple tabs open.
Signals professionalism. Sites without proper favicons look unfinished, even big brands sometimes fail at this.

Studies show users with 10+ open tabs identify a site by favicon before reading the title. Your favicon is real estate worth taking seriously.

ICO vs PNG vs SVG

ICO (`favicon.ico`)

The original favicon format, introduced by Microsoft in 1999. Its superpower: it’s a container. A single .ico file holds multiple PNG-encoded images at different resolutions (typically 16×16, 32×32, 48×48). The browser/OS picks the right one for the context.

Use it for: maximum compatibility, especially Windows desktop shortcuts and Outlook email signatures.

PNG (`favicon-32x32.png`, `favicon-192x192.png`, etc.)

Modern browsers (Chrome, Firefox, Safari, Edge) prefer PNG. Crisper rendering, alpha channel support, smaller file size than ICO at equivalent quality.

Use it for: modern browsers, Apple Touch Icons (iOS), Android Chrome PWA icons, Windows tile icons.

SVG (`favicon.svg`)

Vector format. Crisp at any resolution, supports CSS and dark-mode-aware fills, much smaller than PNG for simple icons.

Use it for: future-proofing. Modern browsers (90%+) support SVG favicons. Pair with PNG fallback for older browsers.

Best practice: ship all three

<!-- Modern browsers prefer this if available -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Modern browsers fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Legacy/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + theme color -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Favicon Generator outputs this exact set of files plus the snippet, ready to deploy.

The sizes that actually matter

Size	Filename	Used by
16×16	inside favicon.ico	Browser tab, address bar
32×32	favicon-32x32.png + inside favicon.ico	Browser tab high-DPI, taskbar
48×48	inside favicon.ico	Windows desktop shortcut
180×180	apple-touch-icon.png	iOS home screen, watchOS
192×192	android-chrome-192x192.png	Android home screen
512×512	android-chrome-512x512.png	Android splash screen, PWA
150×150	mstile-150x150.png	Windows 10/11 Start tile
infinite	favicon.svg	Modern browsers, retina

You don’t need all of these for a basic site, but a generator that produces them all costs nothing extra and future-proofs you.

Dark mode favicons (2026 best practice)

Modern browsers support dark-mode-aware favicons via SVG with CSS:

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

The favicon adapts to the user’s OS theme, black on light, white on dark. Some users (developers, accessibility advocates) actively look for this detail.

Source image best practices

Before generating, prepare your source:

Square. Minimum 512×512, ideally 1024×1024. Non-square sources will be cropped or padded.
Simple. At 16×16 px, complex logos become unreadable mush. Test by squinting at your logo on a 16-pixel grid: can you still recognize it?
High contrast. The icon needs to read against any browser tab colour (light or dark). Aim for at least 4.5:1 contrast ratio internally.
Transparent background (PNG/SVG). Solid backgrounds look boxy in browser tab strips that have padding.

If your full logo is too detailed, make a simplified mark for the favicon, a single letter, an icon, an abstract shape. Many brands do this (Apple’s apple, Twitter’s bird, Spotify’s circles).

Privacy: why local generation matters

The dirty secret of online favicon generators: most upload your source logo to their server, generate the icons, and email you a link.

That means your unreleased brand identity sits on someone else’s hardware. For a stealth startup, a client project under NDA, or a product launch, that’s unacceptable.

The alternative: generate locally with HTML5 Canvas + WebAssembly for ICO encoding. DuneTools Favicon Generator does exactly this, your logo never leaves your browser, generation happens in a few hundred milliseconds, you download a ZIP with all 12 file variants plus the HTML snippet.

Deployment checklist

✅ Place all generated files at the root of your site (/favicon.ico, /favicon.svg, etc.). Most browsers look here automatically.
✅ Add the <link> and <meta> tags from the generator inside <head>.
✅ Add <link rel="manifest" href="/site.webmanifest"> and create site.webmanifest with the icon definitions (the generator creates it for you).
✅ Test on Chrome, Safari, Firefox tab. Hard-refresh (Cmd+Shift+R or Ctrl+F5), favicons cache aggressively.
✅ Add to iPhone home screen (Safari → Share → Add to Home Screen), verify the apple-touch-icon shows.
✅ Test in dark mode (system → switch theme), verify SVG adapts.

Common mistakes

Renaming a JPEG to .ico. ICO has its own format. Renaming doesn’t convert. Use a generator.
Single 16×16 PNG only. Looks fine in tabs, terrible everywhere else (taskbar, mobile home screen, PWA splash).
Forgetting Apple Touch Icon. When users add your site to iPhone home screen and your icon is missing, iOS uses a screenshot. Looks awful.
No theme-color meta tag. Adding <meta name="theme-color"> makes Chrome/Safari mobile use your brand color in the address bar, small detail, big impact.
Not testing dark mode. A logo invisible on dark backgrounds is a logo missing from millions of users’ tabs.

Real-world checklist

Before launching:

Summary

A complete 2026 favicon implementation has 8-12 files, takes 5 minutes to generate with the right tool, and noticeably improves perceived professionalism of your site. Skip none of the formats, there’s no good reason to in 2026, and the cost is one upload to Favicon Generator.