Favicon Generator

Related tools

A favicon is the tiny icon a browser shows next to a page's title — in the tab, in bookmarks, in history, and on a phone's home screen when someone saves your site. This tool takes one source — an image or a single letter — and renders every file and size a modern site actually needs, then hands you the exact <head> markup to wire it up.

What's in the download

The .zip contains a deliberately small, current set — not the 20-file dump that was common a decade ago:

• favicon.ico — a single icon file bundling the 16, 32 and 48px versions. Still the most broadly compatible format and the one browsers look for by default.
• favicon.svg — a crisp vector version that scales to any size and can adapt to dark mode. Included when you start from text, or when your source image is already an SVG.
• favicon-96x96.png — a PNG fallback for contexts that prefer one.
• apple-touch-icon.png — 180×180, used when someone adds your site to an iPhone or iPad home screen.
• web-app-manifest-192x192.png and 512x512.png — the icons Android and installable web apps use.
• site.webmanifest — a small JSON file that ties the manifest icons together, pre-filled with the site name you enter.
• head-snippet.html — the same markup shown in the preview panel, ready to copy into your page's <head>.

Starting from an image vs. text

From an image is the right choice when you already have a logo or mark. A square source with a bit of internal breathing room works best; if yours isn't square, switch the scaling to "cover" to fill the frame, or add padding so a wide logo isn't cropped. SVG sources give the sharpest result because they're re-rasterised cleanly at every size rather than scaled from one bitmap.

From text is a fast way to get a clean, legible icon before a logo exists — a single strong letter, an initial, or an emoji on a solid colour. It's also what many well-known sites actually use. Because text mode can produce a true vector, its favicon.svg stays razor-sharp at any size.

Installing the favicon on your site

Unzip the files into the root of your website (the same folder as your homepage), so they're reachable at https://yoursite.com/favicon.ico and so on. Then paste the generated snippet into the <head> of every page — or your shared layout template:

<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">

Browsers cache favicons aggressively. If you're replacing an existing one and don't see the change, do a hard refresh, try a private window, or append ?v=2 to the icon URLs.

Designing an icon that reads at 16px

• One idea only. At 16px a favicon is about eight readable pixels across. A full wordmark turns to mud — use a single letter, a symbol, or the most distinctive fragment of your logo.
• Strong contrast with the background. The icon sits on both light and dark browser chrome, so avoid pale marks that vanish on white.
• Give it a background. A solid colour behind a transparent logo makes the shape hold together far better than a floating mark, especially in bookmark lists.
• Check the 16px preview, not the 64px one. Details that look fine larger often disappear at the size that matters most.
• Corner radius is optional. Browser tabs show the icon as-is; iOS masks it to a rounded square automatically. A slight radius mainly helps the home-screen tile.

Frequently asked questions