How to Make a Favicon in 2026 (You Need Fewer Files Than You Think)

Search for favicon sizes and you will find tutorials listing 16, 32, 48, 96, 120, 144, 152, 167, 180, 192 and 512 pixel exports, plus Windows tile images and a browserconfig.xml.

Most of that is from around 2015 and you do not need it. Browsers now read a scalable SVG and downscale it themselves, and a single .ico bundles the small sizes into one file. Windows tiles are gone. The modern set is four or five files.

The files you actually need

favicon.ico — a container holding 16×16, 32×32 and 48×48. One file, three sizes inside. Still needed because some contexts only look for it.

icon.svg — a scalable vector version. Modern browsers prefer this and scale it to whatever they need, which is why the pile of PNG exports became unnecessary.

apple-touch-icon.png at 180×180 — used when someone adds your site to an iOS home screen. One size covers current iPhones and iPads.

icon-192.png and icon-512.png — only if your site is a progressive web app or you want a proper Android home screen icon. Skip both if not.

Design once at 512×512 and export down. Nothing requests larger than 512, so a bigger master just adds weight.

The HTML

<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 first line is not decoration. Without it, Chrome will pick the ICO file over the SVG, and you lose the scalable version you went to the trouble of making. This is a browser quirk rather than a spec requirement, and it is the single most common reason an SVG favicon "does not work".

Drop the manifest line if you are not building a PWA.

The traps

The Apple touch icon must be opaque. iOS does not honour transparency on home screen icons — a transparent PNG renders on black. Give it a solid background, and add roughly 20 pixels of padding inside the 180×180, because iOS applies its own rounded corner mask on top.

Maskable icons need their own artwork. If you are shipping a PWA, Android launchers crop your icon to whatever shape they use — circle, squircle, rounded square. A maskable icon must keep everything important inside a central circle of about 409×409 within the 512×512 canvas. Reusing your plain 512 icon means the launcher will crop the edges off your logo. This needs a separately padded export, not the same file listed twice.

Favicons cache aggressively. Browsers hold onto them far longer than other assets, so after you change one you will keep seeing the old icon and assume it did not work. Hard refresh, try a private window, or add a query string to the filename in your link tag while testing.

Your logo probably will not survive 16 pixels. This is a design problem rather than an export problem, and it is the one people underestimate.

Design for the smallest size first

At 16×16 you have 256 pixels. Your wordmark will become a grey smudge. Thin strokes will disappear. Fine detail will alias into mush.

What works: a single letter, a simple geometric mark, one strong shape, high contrast. What does not: full logos with text, thin outlines, gradients, anything with more than two or three visual elements.

Design the 16 pixel version deliberately rather than hoping your logo scales down. Many good favicons are a simplified mark that shares the brand's colour and one recognisable shape, and nothing else. Test by shrinking your candidate to 16 pixels and looking at it beside a row of other browser tabs — that is the actual context.

If you need a raster master to work from, size it up or down first with the resizer, then compress the PNG exports so your icons are not disproportionately heavy for what they are.

One thing worth doing that almost nobody does

An SVG favicon can respond to the user's colour scheme, because you can embed CSS inside it:

<style>
  path { fill: #111; }
  @media (prefers-color-scheme: dark) {
    path { fill: #eee; }
  }
</style>

A dark logo on a dark browser tab bar is nearly invisible. This is a few lines and it fixes the problem properly, rather than compromising on a colour that looks mediocre in both modes.

Favicons in search results

Google displays a favicon next to your result on mobile, which makes it worth getting right beyond the browser tab.

Google's guidance asks for an icon that is a multiple of 48 pixels square and at least 48×48. A correctly linked 192×192 PNG generally satisfies this, and a .ico containing 48×48 covers it too.

It also needs to be reachable by Googlebot and stable — changing it frequently means it may not appear at all while the change is picked up.

If your CMS only accepts one file

WordPress, Shopify, Squarespace and most site builders take a single square image and generate the rest. Upload a 512×512 PNG and let the platform handle it.

You lose the SVG and the dark mode trick, but you gain not having to think about any of this. That is a reasonable trade if you do not control the HTML.

The short version

Four files cover almost everything: a multi-size favicon.ico, an icon.svg, a 180×180 opaque apple-touch-icon.png, and a 512×512 PNG if you are shipping a PWA. Put sizes="32x32" on the ICO link or Chrome ignores your SVG. Make the Apple icon opaque with padding, give maskable icons their own padded artwork, and design for 16 pixels rather than assuming your logo will scale. Then expect to see the old icon for a while, because favicons cache like nothing else.