ImgWand
Open a tool

Favicon formats and sizes: what you actually need in 2026

Favicon advice online ranges from "one .ico file" to lists of twenty PNG sizes for devices that no longer exist. The truth sits in between: a modern site needs about four files and four lines of HTML. Here's the current, minimal, correct setup — and why each piece exists.

The minimal modern set

These four files cover every browser, tab, bookmark, home screen and PWA install prompt that matters today:

  • favicon.ico — a multi-size ICO containing 16×16, 32×32 and 48×48 images, served from the site root.
  • An SVG favicon (e.g. favicon.svg) — sharp at every size, tiny, and it can adapt to dark mode.
  • apple-touch-icon.png — a single 180×180 PNG for iOS home-screen bookmarks (also picked up by Android and various apps as a high-res icon).
  • Two PNG manifest icons — 192×192 and 512×512, referenced from a web app manifest, used by Android/Chrome when a site is installed and on splash screens.

The HTML tags to use

Put these in your <head>:

  • <link rel="icon" href="/favicon.ico" sizes="32x32"> — the universal fallback. Even without the tag, browsers request /favicon.ico from the root by convention, which is why it should live there.
  • <link rel="icon" href="/favicon.svg" type="image/svg+xml"> — modern browsers that understand SVG favicons pick this over the ICO.
  • <link rel="apple-touch-icon" href="/apple-touch-icon.png"> — iOS ignores standard icons for home-screen bookmarks and looks for this instead. 180×180 is the current size; older smaller variants (152, 167) are unnecessary because devices scale down cleanly.
  • <link rel="manifest" href="/site.webmanifest"> — the manifest's icons array lists the 192 and 512 PNGs with their sizes and type.

That's the whole setup. Search engines have their own preferences too — Google's documentation asks for a favicon of at least 48×48 (or a multiple), which the ICO above already satisfies, and a good favicon is worth having since it appears next to your site in mobile search results.

Why the ICO format survives

ICO is a 1990s container that bundles several sizes of the same icon in one file, letting the consumer pick the closest match — 16×16 for a browser tab, 32×32 for a taskbar shortcut, 48×48 for a desktop icon. It survives because it's the one format every browser back to the dawn of favicons understands, and because plenty of non-browser software (RSS readers, link previews, enterprise tools) still requests /favicon.ico directly, ignoring your HTML entirely. Build it from a PNG with a PNG to ICO converter that packs the standard 16/32/48 sizes into one file.

SVG favicons: sharp, tiny, dark-mode aware

An SVG favicon is usually under 1 KB, stays razor-sharp at any resolution, and — its killer feature — can include a prefers-color-scheme media query inside the SVG itself, so the icon switches colours to stay visible in both light and dark browser themes. Chrome, Edge, Firefox and Opera have supported SVG favicons for years; Safari's support has lagged behind the others, which is precisely why you keep the ICO fallback in place. Declare both and every browser picks the best one it understands.

Designing an icon that works at 16 pixels

Most favicon problems are design problems, not technical ones. At 16×16 you get 256 pixels to work with — a full logo with a wordmark becomes an unreadable smudge. What works:

  • Use a single letterform or simplified mark, not the complete logo.
  • Fill the canvas. Icons drawn with generous padding look tiny next to competitors' tabs. 5–10% padding is plenty.
  • Check contrast against both themes. Browser tab bars are commonly dark now; a near-black icon disappears. Test on both, or use an adaptive SVG.
  • For the apple-touch-icon, use a solid background — iOS composites transparency onto black, which usually looks wrong. Keep rounded corners off; the OS applies its own mask.

Common mistakes

  • A single-size 16×16 ICO — looks blurry everywhere the OS wants 32 or 48 pixels. Always pack multiple sizes.
  • Renaming a PNG to favicon.ico — many browsers sniff the real type and cope, but plenty of other consumers don't. Convert properly.
  • Shipping a 512×512 PNG as the only icon — downscaling to 16 px at render time produces mush; small sizes deserve their own crisp versions.
  • Forgetting the manifest icons — the site still works, but "Add to home screen" on Android falls back to an ugly generated tile.
  • Fighting the cache. Browsers cache favicons very aggressively. When you redesign, change the filename or add a query string (?v=2) — otherwise you'll be the only person still seeing the old icon... or the only one seeing the new one.

Frequently asked questions

What size should a favicon be in 2026?

Provide an ICO containing 16×16, 32×32 and 48×48, plus a 180×180 apple-touch-icon and 192/512 manifest PNGs. If you add an SVG favicon, it covers all in-browser sizes at once in supporting browsers.

Do I still need favicon.ico if I have an SVG favicon?

Yes. Some browsers and many non-browser tools either don't support SVG favicons or request /favicon.ico directly without reading your HTML. The ICO is your safety net; it costs a few kilobytes.

Can I use a JPG or WebP as a favicon?

Some browsers will render them via a <link rel="icon"> tag, but neither supports the multi-size packing of ICO, JPEG lacks transparency, and support is inconsistent across tools. Stick to ICO + SVG + PNG — the boring answer that always works.

Why isn't my new favicon showing up?

Caching, almost every time. Hard-reload, try a private window, or bump the icon URL (/favicon.ico?v=2). Some browsers hold favicon caches for weeks regardless of normal cache headers.

Related guides