Favicon generator — full icon pack from one image

How to generate a favicon pack

1. Drop in a square image — an SVG or a PNG of 512 px or more gives the best results.
2. Add a background colour if your logo is transparent. iOS paints transparency black on the home screen, so a solid background is usually what you want.
3. Add a little padding if the mark is dense; around 10% keeps a wordmark from touching the edges.
4. Check the real-size previews. If the 16 px version is a smudge, the mark is too detailed for a browser tab.
5. Download the ZIP, unpack it into your site root, and paste the HTML snippet into your <head>.

Every image is rendered from a 1024 px master by repeated halving rather than one big downscale, which is what keeps the 16 and 32 px versions readable instead of mushy. All of it happens in this tab — your logo is never uploaded.

What each file is for

The HTML you need

Five links and one meta tag cover every current browser and platform. Anything beyond this — the dozens of msapplication-* tags and Apple size variants that older generators emit — has been unnecessary for years.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">

If you also ship an SVG favicon, add <link rel="icon" type="image/svg+xml" href="/favicon.svg"> before the PNG lines. Browsers that support it will prefer the vector; the rest fall through to the PNGs.

Inside an .ico file

ICO is a container, not an image format. It begins with a six-byte ICONDIR header — two reserved bytes, a type field of 1 for icons, and a count — followed by one sixteen-byte directory entry per image. Each entry records the width and height as single bytes (with 0 meaning 256), the colour depth, the payload length and the byte offset where that payload begins. The payloads then follow, back to back.

Historically each payload was a headerless BMP with an awkward AND mask for transparency. Since Windows Vista the payload may instead be a complete PNG file, which is smaller, has real alpha, and is what this tool writes at 16, 32 and 48 pixels. Every browser and every supported Windows version reads it. The whole container is assembled here in JavaScript — there is no server-side ImageMagick call in the middle.

Designing a mark that survives 16 pixels

A favicon is 16 device pixels on a standard display. That is enough for one bold shape or one letter, and nothing else. Some rules that hold up:

• Drop the wordmark. Use the symbol, or a single initial. Text below about four characters is illegible at 16 px.
• Thicken the strokes. A hairline that looks elegant at 512 px disappears entirely at 16.
• Increase the contrast. Subtle tonal differences merge into a single grey once the image is a handful of pixels.
• Test on both themes. A dark navy mark vanishes against a dark browser chrome. If yours does, ship a second SVG favicon with a prefers-color-scheme media query inside it.
• Keep the silhouette distinctive. At tab size, people recognise shape and colour, never detail.

Why your new favicon is not showing

Favicons are cached more aggressively than almost anything else on the web, and the cache is often separate from the normal page cache. In order of likelihood: your browser is holding the old one (open the icon URL directly and hard-reload it), a CDN is holding it (purge the path), or a service worker is serving a stale copy. Adding a query string such as /favicon.ico?v=2 to the link tags is the pragmatic fix, and works on every layer at once.