Favicon sizes in 2026: the small set that covers everything

Favicon generators often produce twenty or more files, most of them for browsers and platforms that no longer ask for them. A small set covers what is in use today.

The set

The tags

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

The sizes="32x32" on the ICO line stops some browsers from choosing it over the SVG. The manifest holds the 192 and 512 icons, and optionally a maskable one, covered in PWA maskable icons.

A favicon that follows dark mode

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

A dark mark on a transparent background disappears in a dark tab bar. The media query inside the SVG fixes that. Alternatively, give the icon its own coloured background so it reads on both.

Google Search results

Google shows your favicon next to results on many devices. Its guidance asks for a square icon larger than 48 by 48, ideally a multiple of 48, at a stable URL that Google can crawl. A favicon blocked by robots.txt does not show.

Design for 16 pixels

A browser tab shows the icon at 16 CSS pixels. Detailed app icons turn into smudges there. Use the simplest version of your mark, and check it at real size, as described in app icons at small sizes.

App Icon Foundry writes this favicon set as part of every export, with the manifest lines and the head tags to paste in, from the same design as your app icons.