You shipped the site, checked it on desktop Chrome, and the favicon looked fine. Then a teammate opened it on iOS, added it to the home screen, and got a generic gradient square with a screenshot of your page inside it. That is the favicon gap. Browsers request icons in more sizes and formats than most developers ship, and the missing ones fall back to ugly defaults. This favicon guide covers the formats that matter in 2026, the sizes each surface wants, the <link> tags to declare them, and how to generate the whole set from one source image.

1. What favicons are and where they show up

A favicon is the small icon that represents your site across the browser UI and beyond. The surfaces add up:

  • The browser tab next to the page title.
  • The address bar on some desktop browsers.
  • Bookmarks and the bookmarks bar.
  • The iOS home screen, when a user taps “Add to Home Screen”.
  • Android home screens and the task switcher.
  • Windows jump lists and pinned tabs.
  • PWA install prompts and the launcher icon after install.

Each surface requests an icon at a different pixel size, and some insist on a specific file format. Ship one favicon.ico and call it done, and you cover the tab. Everything else gets a placeholder.

2. Formats: ICO, PNG, and SVG — which for which

Three formats cover the field.

ICO is the legacy container. It can hold multiple bitmaps in one file, which is why a single favicon.ico used to be enough. Internet Explorer needed it. Modern browsers no longer require ICO for the tab, but keeping one at /favicon.ico is still worth it, because some browsers and crawlers request that exact path by default and 404s are noise in your logs.

PNG is the workhorse for 2026. It handles transparency, it renders sharply at the sizes Apple and Android want, and every relevant browser supports it. Most of your <link> icons will be PNG files.

SVG is the modern, scalable option. A single SVG file renders crisply at any size and accepts a <link> with type="image/svg+xml". Chrome, Firefox, Edge, and Safari all support SVG favicons now. One caveat: iOS does not pick up SVG for the home-screen icon, so SVG is a progressive enhancement on top of PNG, not a replacement.

The short version: ship ICO at the root, PNG for the explicit sizes, and SVG as the modern default for the tab.

3. The sizes that actually matter in 2026

You do not need dozens of files. A handful covers every surface:

  • 16×16 and 32×32 PNG — the classic tab sizes. Most desktop browsers pick 32 on hi-dpi screens and 16 on standard ones.
  • 180×180 PNG — the Apple touch icon. iOS scales this for the home screen, the task switcher, and pinned tabs on iPad. Get this one right; it is the icon iOS users actually see.
  • 192×192 and 512×512 PNG — declared in the PWA manifest. Android, Chrome on Windows, and PWA install UI use 192 for the launcher and 512 for splash screens.
  • A 32×32 (or multi-resolution) ICO at /favicon.ico — the legacy fallback for browsers and crawlers that hit the root path.

You can add 48×48 for Windows pinned sites and 150×150 for Windows tile badges if you care about those. Beyond that, more sizes are not going to buy you anything — they just bloat the payload and the manifest.

Here is a complete, copy-paste <head> block. Drop it into your base layout, adjust paths as needed, and you have the 2026 set covered.

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

Order matters: the SVG line goes first so capable browsers take it, and PNG sizes follow as fallbacks. The apple-touch-icon is a separate rel value — iOS ignores standard rel="icon" for the home screen, so do not rely on one tag to cover both.

The manifest is a small JSON file that points Android and PWA surfaces at the larger sizes:

{
  "name": "DevTidy",
  "short_name": "DevTidy",
  "icons": [
    { "src": "/android-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0a0a0a",
  "background_color": "#ffffff",
  "display": "standalone"
}

That manifest is what turns a website into an installable PWA in Chrome on Android and desktop. Without it, the install prompt never appears.

5. Generate the full set from one source image

The clean workflow is to design one source image — ideally an SVG — and export every size from it. SVG lets you lock in the proportions, edit colors once, and re-export without pixel-level cleanup.

Start by designing or pasting your logo into an SVG tool to get the source shape right. Then run it through a Favicon Generator to export the 16, 32, 180, 192, and 512 PNGs plus an Apple touch icon and a manifest in one pass. The generator takes a single image and produces the full directory of files.

For the legacy /favicon.ico, use a dedicated ICO Generator to bundle the 16 and 32 bitmaps into one multi-resolution .ico. Keep that file at the site root regardless of what your <link> tags say, because some clients ignore the tags and fetch the root directly.

One digression worth flagging: iOS rounds the Apple touch icon to a squircle and applies its own mask. Design your 180×180 with enough internal padding that the corners can be cropped without clipping the logo. A logo that fills the full square edge-to-edge will get its corners eaten on iOS.

FAQ

Do I still need an ICO file in 2026?

Strictly speaking, no browser requires ICO anymore. In practice you should still keep /favicon.ico at the root, because some browsers and a lot of crawlers fetch that path without reading your HTML. Ship a small multi-resolution ICO as a default and let the real icons come from your <link> tags.

What size should my source image be?

Design as SVG so size is not a constraint. If you must start from a raster image, use at least 512×512 — large enough to downscale cleanly to 16×16 without becoming muddy. Anything smaller and the 192 and 512 PWA icons will look soft on hi-dpi phones.

Why does my favicon look fine on desktop but wrong on iOS?

iOS ignores rel="icon" for the home screen and only reads rel="apple-touch-icon" at 180×180. If that tag is missing, or the file is the wrong size, iOS falls back to a screenshot of your page rendered as a rounded square. Add the apple-touch-icon link and the 180 PNG, and the home-screen icon will match the tab.

Ship the files, wire up the <link> block above, and your favicon stops being a source of “why does it look wrong on iPhone” tickets. Build the full set with the Favicon Generator, add the legacy /favicon.ico from the ICO Generator, and start from a clean SVG using the SVG tool.