Favicon guide: sizes, formats and the modern setup

You no longer need a folder of 20 favicon files. A modern setup is an SVG favicon, a couple of PNG fallbacks, and one Apple touch icon — plus a web manifest. Here's the minimal, robust version.

The files you actually need

favicon.svg — scalable, works in modern browsers, can even adapt to dark mode.
favicon.ico (16/32px) — legacy fallback for old browsers and some tools.
apple-touch-icon.png — 180×180, used when iOS users add your site to the Home Screen.
icon-192.png and icon-512.png — referenced by your web manifest for PWA installs and Android.

The HTML

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

Design tips

Favicons render as small as 16px, so simplify: bold shapes, high contrast, minimal detail. A full logo rarely works — use a single distinctive glyph or monogram. Test it in a real browser tab, not just at large size.

Make a favicon fast

Pick an icon, add a rounded background and export a crisp PNG or SVG for your favicon.

Open the editor →

Frequently asked questions

Do I still need favicon.ico?

Only for old browsers and some crawlers. An SVG plus a single 32px ICO covers virtually everyone.

What size should a favicon be?

Provide a scalable SVG plus 32×32 (ICO) and 180×180 (Apple touch). The manifest adds 192 and 512 PNGs.

Can a favicon be animated?

Technically you can swap it with JavaScript, but it's discouraged — keep favicons static and legible.