Favicon Generator

How to use Favicon Generator

1. Choose your source image — square, with generous padding around the mark.
2. Generate and download the 32×32 PNG.
3. Put it at your site root and reference it with a link tag in the head.
4. Add a 180×180 apple-touch-icon and manifest icons if you want home-screen support.
5. A square source works best; a rectangular image will be squashed rather than cropped.
6. Use a transparent background so the icon sits correctly on light and dark browser chrome.
7. The image is processed in your browser — nothing is uploaded.

You almost certainly do not need an .ico file

The .ico format exists because Internet Explorer looked for /favicon.ico at the site root and understood nothing else. Every current browser reads a PNG referenced with <link rel=“icon” type=“image/png” href=“/favicon.png”> and prefers it, because PNG supports proper alpha and better compression. The one remaining reason to keep a favicon.ico at the root is that some feed readers, link-preview bots and older crawlers still request that exact path — a nice-to-have, not a requirement for browsers.

Design for 16 pixels, not for 512

The favicon is displayed at roughly 16×16 in a tab and 32×32 on a high-density screen. At that size a detailed logo becomes a grey smudge. What survives is a single letter, a simple geometric mark, or one strong silhouette — with high contrast against both light and dark browser chrome, since users have both. Test it by shrinking your image to 16 pixels and looking at it from arm’s length; if you cannot tell what it is, neither can anyone glancing at a tab.

The full set, if you want one

A complete modern set is smaller than the generators of a decade ago suggested: a 32×32 PNG for browsers, a 180×180 apple-touch-icon for iOS home screens, and 192×192 plus 512×512 PNGs referenced from a web app manifest for Android. An SVG icon with rel=“icon” is worth adding where you have one, because it scales to any density and can respond to dark mode with a media query inside the file. The dozens of sizes older tools produced were for devices nobody uses now.

Why your new favicon is not showing

Browsers cache favicons far more aggressively than pages, sometimes ignoring a normal hard refresh entirely. Add a query string to the href to force a re-fetch, open the icon URL directly to confirm it is being served, and check the path is absolute from the site root rather than relative to the current page. If the tab still shows the old icon after all that, it is almost always cached rather than missing.