How to make a favicon from any image (the right sizes, the right formats)

Why favicons are more complicated than they should be

A favicon is a tiny icon shown next to your page's title in browser tabs. Simple concept, chaotic implementation:

• Chrome and Firefox want a 32×32 PNG or SVG.
• Safari on iOS wants a 180×180 PNG for the home screen ("apple-touch-icon").
• Windows tiles want 270×270 PNG (rare use case now).
• Android's Chrome uses 192×192 and 512×512 PNGs referenced from a Web App Manifest.
• Legacy sites still ship a favicon.ico file with 16×16, 32×32, and 48×48 embedded.

You do not need all of these. A minimum viable modern set is:

• favicon.ico (16, 32, 48) — legacy fallback, still worth having.
• icon.svg — scalable, works in modern browsers, tiny file.
• apple-touch-icon.png at 180×180 — iOS home screen.
• icon-192.png and icon-512.png — Android/PWA, referenced from the manifest.

That covers 99.9% of real-world usage.

Starting from any image

Most people already have a logo — a square PNG at 512×512 or bigger, or an SVG. Favicon Generator takes any square image and produces all the sizes above at once. If your source isn't square, crop it first (Image Cropper) — favicons that get squashed to fit look bad.

For text-based favicons (a single letter, an initial), design at 512×512 with generous padding — icons on iOS home screens have their corners rounded, and content close to the edge gets clipped.

SVG favicons: worth it?

Yes, if your logo is already SVG. Advantages:

• One file for every size. Renders sharp at any DPI.
• Tiny. A logo SVG is usually 1–3 KB versus 5–20 KB for a PNG set.
• Adapts to dark mode. With a bit of CSS inside the SVG (@media (prefers-color-scheme: dark)) you can swap colors automatically.

The one caveat: browsers older than 2020 don't support SVG favicons, so ship an ICO fallback alongside.

The HTML you actually need

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

Four lines. Every browser picks the format it prefers. The manifest handles the Android/PWA sizes.

Common mistakes

• Uploading a 4000×4000 photograph as a favicon. It'll be shrunk to 32×32 and become an unreadable smudge. Favicons need to be readable at 16×16 — think bold shapes, high contrast, ideally just a letter or a symbol.
• Skipping the apple-touch-icon. If someone adds your site to their iPhone home screen and you don't have one, iOS generates a screenshot of your page and uses that. It looks awful.
• Referencing the favicon from HTML only. Some old link previews and RSS readers look for /favicon.ico at the site root. Put a copy there even if you also reference it in HTML.

Compress before shipping

The PNG variants coming out of most favicon tools are unoptimized. Run them through Image Compressor before uploading — a 180×180 apple-touch-icon should be 2–5 KB, not 15 KB. Multiply by the number of visitors and it's real bandwidth.

For SVG, minify it (strip whitespace and unused attributes). Many icon generators output verbose SVG with editor metadata still embedded.

Testing

Once deployed, test in:

• Chrome and Firefox desktop tabs (should be sharp).
• iOS Safari, Add to Home Screen (should show your apple-touch-icon).
• Android Chrome, Add to Home Screen (should show your 192px or 512px icon from the manifest).
• A Google search result for your site (Google fetches /favicon.ico by default; may take a week to update).

If any of these show a broken icon or the default globe, check the browser's Network tab — you're probably serving the wrong content-type or the file 404s.