How to Make a Favicon in 2026: Sizes, Formats, and the SVG-First Setup

The favicon is the smallest asset your site ships and one of the most visible: browser tabs, bookmarks, history lists, home-screen shortcuts — and, since Google shows favicons next to results on both mobile and desktop, your search listings too. A missing or fuzzy favicon quietly makes every one of those surfaces look less finished.

The good news is that favicon setup has gotten dramatically simpler. Old generator tools produced thirty PNGs and a wall of <link> tags, most of which served browsers that no longer exist. In 2026, five files and four lines of HTML cover everything.

The Modern Favicon Set: Five Files

• favicon.ico (32×32) — the legacy workhorse, served from your site root for old browsers and the many tools that request /favicon.ico without reading your HTML.
• icon.svg — a vector favicon for modern browsers. One file, every resolution, and it can adapt to dark mode (more below).
• apple-touch-icon.png (180×180) — used when someone saves your site to an iOS home screen. Give it a solid background; iOS fills transparency with black.
• icon-192.png and icon-512.png — declared in the web app manifest, used by Android and PWA installs (the 512 also feeds splash screens).

<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">

<!-- manifest.webmanifest -->
{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-mask.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Why SVG-First

A vector favicon sidesteps the whole "which sizes do I export?" question for modern browsers — the tab, the bookmark bar, and the high-DPI display all render from the same few hundred bytes. If you are new to the format, our plain-English SVG explainer covers it. But the underrated feature is that SVG favicons can carry CSS, which means they can respond to the user's color scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <style>
    path { fill: #121212; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fafafa; }
    }
  </style>
  <path d="M4 4h16v16H4z"/>
</svg>

A dark mark that disappears against Chrome's dark tab bar is one of the most common favicon failures, and this one media query fixes it.

Which Size Does What

The maskable variant deserves one sentence of explanation: Android launchers crop icons into circles, squircles, and other shapes, so the maskable PNG needs your mark comfortably inside the center of the canvas — safe-zone rules and all the adjacent app-icon sizes live in our app icon size reference.

Designing for 16 Pixels

The design problem is harsher than the technical one: your mark has to survive at 16×16, where there is room for roughly one idea. The rules that consistently work:

• Use the mark, not the wordmark. Text is unreadable at tab size. If your logo is a wordmark, cut it to a monogram — one or two letters.
• Thicken everything. Strokes that look elegant at 24px vanish at 16px. Favicon variants of a logo are often deliberately bolder than the logo itself.
• Test on light and dark tabs. Or better, ship the dark-mode SVG trick above.
• Align to the pixel grid. A shape sitting on half-pixel coordinates renders as blur at small sizes. Snap edges to whole pixels before exporting.
• Starting from a blurry logo file? Vectorize it first, then simplify — tracing artifacts that are invisible at 200px turn to mud at 16.

One expectation to set: Google recrawls favicons on its own schedule, so a new favicon can take days to show up in search results. If the tab shows the new icon and search still shows the old one, that is normal lag, not a bug in your setup.