How to make a favicon that works everywhere — sizes, formats and the tags

The favicon is the smallest graphic on a site and the most-seen: every tab, bookmark, history entry, search result and home-screen shortcut shows it. It is also a small compatibility swamp — ICO from 1999, PNGs in several sizes, an SVG for modern browsers, a special file for iPhones. This guide gives the minimal set that works everywhere and the tags to use; the favicon generator produces the files from one image.

What a favicon is used for

Browser tabs and bookmarks (16 and 32 px), Windows taskbar pins (larger), macOS Safari pinned tabs, Android home-screen shortcuts and Chrome's install prompt (192 and 512 px via the web manifest), iOS "Add to Home Screen" (the apple-touch-icon, 180 px), and — increasingly important — Google search results, which show a site's favicon beside its name on mobile and desktop and have minimum size and content rules (at least 48×48 in a multiple of 48, and it must represent the site). One artwork, many renderings.

The files a site needs today

• favicon.ico at the site root, containing 16×16, 32×32 and 48×48 — the legacy fallback every browser and many tools request without being told.
• favicon.svg — a vector icon for modern browsers, crisp at any density, with the option of a dark-mode variant via CSS media queries inside the SVG (What an SVG is, why it scales forever, and when not to use it).
• apple-touch-icon.png at 180×180 — iOS ignores everything else; make it opaque, as iOS rounds the corners itself.
• icon-192.png and icon-512.png referenced from the web manifest for Android and PWA installs (App icon sizes explained: every size, and why there are so many).

That's five files. The dozens of sizes older generators produced (57, 60, 72, 76, 114, 120, 144, 152…) target devices that no longer exist.

The HTML tags

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Browsers that understand SVG icons prefer it; the rest fall back to the ICO. Keep favicon.ico at the root even if you link it, because bookmark managers and feed readers fetch /favicon.ico directly. The meta tag generator writes these along with the rest of the head.

Designing at 16 pixels

At 16×16 there are 256 pixels; a logo with text becomes noise. Use a single bold shape or letter, high contrast against both light and dark tab bars, and no fine lines — test by shrinking the artwork and squinting. Many brands use a simplified mark for the favicon that differs from the full logo, and that is correct. Start from a square 512-px PNG or an SVG; the cropper makes the square, and the background remover clears the box around a logo.

Why it won't update, and other traps

Browsers cache favicons aggressively and separately from pages — a changed icon can take days to appear, and a hard refresh often doesn't help. Rename the file (favicon-v2.ico) or add a query string to the link tag, and clear the site's data to test. Other traps: a transparent apple-touch-icon shows a black background on iOS; a favicon smaller than 48 px or unrelated to the site may not appear in Google results; and a site behind a login can't show a favicon in search at all.