TL;DR

A modern favicon is a handful of files, not one: a multi-size favicon.ico, an .svg if you have a vector source, a 180×180 apple-touch-icon.png, and 192/512 PNGs declared in a web manifest. You can generate the whole set from one image with our favicon generator — in your browser, nothing uploaded — or build it by hand from the list below.

The advice you probably learned is out of date

For most of the web's life, the favicon was one file. Drop favicon.ico in your site root and browsers found it. Done.

That still technically works, and it's still where you should start. But it now covers a shrinking share of the places your icon shows up. Somewhere between browser tabs, bookmark bars, Windows shortcuts, iOS home screens, Android launchers, and PWA install prompts, "one file" quietly became "a small set", and a lot of guidance never caught up.

The good news: the set is smaller than the internet's favicon-generator industry implies. You do not need 47 files. You need about five.

The files that matter in 2026

favicon.ico — still first, still worth doing properly

This is the fallback every browser understands, including old ones. Browsers request /favicon.ico automatically even if you never declare it.

The part people get wrong is treating it as a single image. .ico is a container — it holds several resolutions in one file, and the browser picks whichever fits the context. A 16-pixel version for the tab, a 32-pixel one for the bookmark bar, a 48-pixel one for a Windows shortcut.

If your .ico contains only one size, everything else gets scaled from it, and downscaling is where icons turn to mush. An icon designed at 16 pixels is not the same as a 512-pixel logo squashed to 16 — the small version needs fewer strokes and heavier weights to survive.

Include 16, 32, and 48 at minimum. Adding 256 costs a few KB and covers high-DPI displays.

favicon.svg — the scalable one, if you have a vector

Modern browsers accept an SVG favicon, and it's the best option when you have one: infinitely scalable, crisp at every size, tiny, and it can adapt to the browser's dark mode using a media query inside the SVG itself.

The honest caveat: you cannot make a real SVG out of a PNG. Any tool that claims to is either tracing your bitmap into something approximate, or wrapping the PNG inside an SVG file, which gets you the file extension and none of the benefits. If your logo only exists as a raster image, skip the SVG and let the ICO and PNGs do the work. If you have the vector source, use it.

apple-touch-icon.png — 180×180, and not transparent

This is the icon iOS uses when someone adds your site to their home screen. One size, 180×180, covers current devices.

There's a trap here that catches almost everyone: iOS does not respect transparency in this icon. A logo with a transparent background gets composited onto black, so a dark logo designed for light backgrounds becomes an invisible smudge. Give this one a solid background colour. Our generator flattens it onto white automatically for exactly this reason, while leaving the other icons' transparency intact.

icon-192.png and icon-512.png — Android and PWA

These are referenced from a web manifest rather than a <link> tag directly. Android uses them for home-screen shortcuts, and browsers use them for install prompts and splash screens if your site is installable.

A minimal site.webmanifest is genuinely minimal:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

If you're not building a PWA, these are optional — but they cost nothing and they're what makes an Android home-screen shortcut look deliberate rather than like a screenshot.

The markup

Put the files in your site root and add this to your <head>:

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

Drop the second line if you don't have a vector source. That's the whole thing.

Note what's not there: no long list of apple-touch-icon-76x76, -114x114, -144x144 variants. Those were needed for older iOS versions and are widely repeated by generators that haven't been revisited in a decade. One 180×180 covers current devices.

What you can safely skip

Plenty of favicon generators hand you a zip with thirty or forty files and a block of markup twenty lines long. Almost all of it is dead weight in 2026:

The apple-touch-icon size ladder. apple-touch-icon-57x57, -72x72, -114x114, -144x144 and friends existed for iOS versions that are long gone. One 180×180 is enough.

browserconfig.xml and the msapplication-* meta tags. These drove Windows 8 tile pinning. That feature is gone.

A 512-pixel .ico. The ICO container supports large images, but nothing asks for them, and each embedded size inflates a file that every visitor downloads. Cap it at 256.

Separate favicon-96x96.png, -160x160, and similar. Declared PNG favicons at arbitrary sizes were a workaround from before SVG favicons had support. If you have the SVG, it covers every size; if you don't, the ICO does the job.

The cost of the extra files isn't really the bytes — it's that twenty lines of icon markup in your <head> is twenty lines nobody will dare to touch in two years because nobody remembers which ones matter.

The dark-mode trick

One genuine advantage of the SVG favicon: it can respond to the browser's colour scheme, because a media query inside the SVG applies when the icon renders.

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

A dark logo that vanishes against a dark tab bar is a common, slightly embarrassing problem, and this is the only clean fix — the ICO and PNG formats have no way to express it. Another reason to use the vector source when you have it.

Checking it actually works

Favicons fail quietly, so verify rather than assume:

Visit the file directly. Load /favicon.ico in the address bar. If it 404s, it's a path problem, not a caching one — worth knowing before you spend twenty minutes clearing caches.

Check the tab in a private window. Favicon caching is unusually stubborn, and a private window sidesteps most of it.

Look at it on both light and dark browser themes. This is where a logo with a transparent background and dark strokes reveals itself.

Add the site to an iPhone home screen. The only reliable way to catch the black-background apple-touch problem is to actually do it once.

Designing the icon itself

Three rules that matter more than any of the file plumbing:

Simplify hard. At 16 pixels you have 256 pixels total. A wordmark is unreadable. A detailed illustration is noise. Most good favicons are a single letter, a simple glyph, or one recognisable shape.

Contrast beats detail. Your icon sits next to other tabs, on light and dark browser chrome. Strong shape contrast survives that; subtle gradients don't.

Test at actual size. Everyone designs favicons zoomed in at 800% and is surprised later. Open the real thing in a real tab before you ship it.

A useful sanity check: open your site in a window with a dozen other tabs and see whether you can find yours without reading the titles. That's the actual job the icon does. If it takes you a moment, it will take a returning visitor longer — and tab-finding is most of what a favicon is for, well ahead of looking handsome in a bookmark list.

It's also worth deciding whether your favicon should be your logo at all. Wordmarks almost never survive the shrink. Plenty of well-known sites use a single letter, a fragment of their mark, or a simplified glyph that shares the logo's colour and weight without trying to reproduce its detail. That's not a compromise — it's designing for the size you're actually rendering at.

If your framework wants to handle it

Several modern frameworks have opinions about favicons, and fighting them creates duplicate or conflicting tags. Check your framework's convention before hand-writing the markup.

File-convention frameworks increasingly pick up icons by filename from a known directory — drop favicon.ico, icon.png, and apple-icon.png in the right folder and the framework emits the <link> tags itself. If yours does this, use it: hand-written tags plus generated tags means two competing declarations, and which one wins is not something you want to be debugging.

Static site generators generally don't do anything special, so the manual tags above are correct.

A caveat for single-page apps: if your icon paths are relative rather than root-absolute, they resolve differently depending on the route the user landed on. Use /favicon.ico, not favicon.ico — a leading slash costs nothing and removes an entire category of "works on the homepage, broken on every other page" bug.

Whatever the mechanism, the set of files is the same. Framework conventions change how the tags get emitted, not which icons browsers ask for — so generate the package once, then wire it up whichever way your stack prefers.

Generating the set

If you'd rather not export five files by hand, our favicon generator takes one image and produces the whole package as a zip: the multi-size .ico, the PNGs, the manifest, the SVG if you uploaded one, and a README.txt with the exact <link> tags.

It runs entirely in your browser — the image is never uploaded, which is a reasonable thing to want for an unreleased logo. And if you only need the single file, the same tool has a plain PNG to ICO mode that just hands you the .ico.

Frequently asked questions

Do I still need a favicon.ico in 2026?

Yes, though it's no longer the whole job. Browsers request /favicon.ico automatically, and it remains the universal fallback — including for older browsers and Windows shortcuts. Keep it, make it multi-size, and add the SVG and apple-touch icons alongside rather than instead.

What favicon sizes should the .ico contain?

16×16, 32×32, and 48×48 at minimum — tab, bookmark bar, and Windows shortcut respectively. Adding 256×256 covers high-DPI displays for a few extra KB. The point of the .ico format is that all of these live in one file and the browser picks the right one, so a single-size .ico wastes the format.

Can I convert a PNG to an SVG favicon?

Not meaningfully. SVG is a vector format that describes shapes mathematically; a PNG is a grid of pixels. Tools that claim to convert one to the other either trace an approximation or embed the PNG inside an SVG wrapper, which gains you nothing. If you have the original vector file, use it. If you don't, the ICO and PNGs are sufficient.

Why does my icon look black on iPhone home screens?

Because iOS ignores transparency in the apple-touch-icon and composites it onto black. If your logo is dark with a transparent background, it disappears. Give that one file a solid background colour — this is the single most common favicon mistake, and it only shows up after someone adds your site to their home screen.

How many apple-touch-icon sizes do I need?

One. A single 180×180 apple-touch-icon.png covers current iOS devices. The long lists of 76, 114, and 144-pixel variants you'll see in older tutorials and many generators are legacy, and iOS scales the 180 fine.

Do I need a web manifest just for icons?

Only if you want Android home-screen shortcuts and PWA install prompts to use your icons properly. It's a few lines of JSON and costs nothing, so it's usually worth including. If your site will never be installed to a home screen, you can skip it and the 192/512 PNGs.

Where do the favicon files go?

The site root is the conventional and simplest location, because that's where browsers look for /favicon.ico unprompted. You can put the others anywhere as long as the <link> tags and manifest point at the right paths, but root keeps it boring, and boring is correct for infrastructure.

Why isn't my new favicon showing up?

Favicons are cached aggressively — often more stubbornly than other assets. Hard-refresh, try a private window, and check the file actually resolves by visiting /favicon.ico directly. If it loads there but not in the tab, it's caching. If it 404s, it's a path problem.