Responsive favicon setup guide

Favicons stopped being a single tiny favicon.ico. Modern browsers now accept an SVG favicon that scales crisply from a taskbar pixel to a high-DPI tab, and browsers fetch the file automatically without you declaring anything. The catch is that older browsers, the Apple home-screen icon, and some clients still want a specific PNG or ICO. A responsive setup serves the scalable SVG first and layers the legacy icons underneath it, so every client gets an icon it can read.

Favicon support today

SVG favicons are supported in Chrome, Firefox, Edge and Safari for the tab and address bar, and they are the modern recommendation because one file covers every size without hand-made variants. The browser requests them via the default /favicon.ico probe and also honors an explicit <link rel="icon" type="image/svg+xml">. Older browser builds and some desktop clients still prefer a PNG or ICO, which is why they stay in a complete setup. The SVG is the primary icon; the raster files are compatibility backstops.

Declare the icons

A minimal, well-ordered set of tags covers the range. Put the SVG first so modern browsers use it, the PNG for legacy tabs, and the ICO as the last-resort fallback:

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

Add apple-touch-icon for iOS home-screen bookmarks, which ignores rel="icon" and wants a 180 by 180 PNG with no transparency. A site.webmanifest with an icons array and a theme_color covers Android/Chrome install prompts. SVG favicons must be a single-color-mark or a simple graphic with a defined viewBox so the browser can render it reliably at tiny sizes; gradients and tiny labels often fail at 16 pixels.

Keep it SVG-capable

The main mistakes are declaring favicon.ico in every browser and never giving the SVG. Browsers that support SVG will use it when you send image/svg+xml; those that do not fall through to the PNG and ICO entries because the browser picks the largest icon whose type and size it understands and that matches the device context. Order the declarations by specificity (SVG, then sized PNG, then the size-free fallback) rather than chaining several ICOs.

Test it renders

Verify in a real browser after deploying. In the tab, on a high-DPI screen, and in a saved bookmark the icon should stay sharp, which is the SVG doing its job. Open the browser console, because a broken favicon typically logs a favicon.ico fetch error and the network tab shows whether the SVG and PNG resolved. Check the two silent surfaces specifically: the iOS home screen with apple-touch-icon, and an Android install prompt through the manifest.

Prevention

Regenerate the SVG when the logo changes and update the PNG and manifest in the same change so the variants do not drift. Keep default favicon.ico referenced at the site root so a bare /favicon.ico probe still resolves. If you rely on an SVG but a specific client stays on a blank or low-res icon, the fix is almost always the raster fallback, not the SVG itself.

Related image setup

Favicons are a small corner of the overall image pipeline. The favicon optimisation guide covers sizing and compression targets, and the SVG versus PNG comparison explains when the vector format is the right choice at all.