Favicon Generator
Turn an image or a letter into a complete favicon set plus the markup. Everything is generated in your browser.
In short
A modern site needs far fewer favicon files than it used to: a 32 pixel PNG, a 180 pixel Apple touch icon, a 192 and 512 pixel pair for the web manifest, and ideally an SVG. The old practice of shipping a dozen sizes and twenty lines of markup has been unnecessary for years.
Last reviewed
Runs entirely in your browser. Nothing you type here is uploaded, stored or logged.
The set you actually need
Favicon advice has not caught up with browsers. Generators still produce twenty files and fifteen lines of markup covering devices that stopped shipping a decade ago.
What is genuinely useful today:
- 32 × 32 PNG. The browser tab and bookmarks. Displayed at 16 CSS pixels on a standard display and 32 on a high-density one, which is why 32 is the right file size to ship.
- 180 × 180 PNG. The Apple touch icon, used when someone adds your site to an iOS home screen.
- 192 × 192 and 512 × 512 PNG. Referenced from the web manifest, used by Android and by installed progressive web apps. The 512 is what appears on a splash screen.
- SVG, optionally. Scales perfectly and can adapt to dark mode with a media query inside the file, though support is not universal so it never replaces the PNGs.
That is four files and about four lines of markup. Anything more is maintenance for an audience that no longer exists.
Design for 16 pixels, not for the preview
This is the whole problem with favicons, and it is why most of them are bad.
A favicon is displayed in a space roughly the size of this letter O. At that size a logo has perhaps a dozen distinguishable pixels across, which is enough for one shape and not enough for anything else.
Things that reliably fail: wordmarks of more than two characters, thin strokes, gradients, photographs, anything with an outline, and any logo with internal detail. They look fine in the generator preview at 200 pixels and turn to grey mush in the tab.
What works: a single bold letter, one simple geometric mark, high contrast between exactly two colours, and a filled background rather than a transparent one. Look at the tab strip of any browser and the icons you can identify at a glance are all built this way.
Most companies with a detailed logo ship a simplified favicon rather than a shrunken one. That is the correct move, not a compromise.
Backgrounds and dark mode
A transparent favicon sits on whatever the browser chrome happens to be, which is light in one theme and dark in the other. A dark icon on a dark tab strip disappears completely.
Filling the background with a solid colour solves this in one step and is why most well-made favicons are a coloured square or circle with a mark on top. It also gives the icon a defined edge, which helps it read as a distinct object in a crowded tab bar.
If you want a genuinely theme-aware icon, an SVG favicon can carry a
prefers-color-scheme media query internally and switch colours. Support is
good in current browsers and absent in older ones, so keep the PNGs as the fallback.
Why your favicon will not update
Browsers cache favicons far more aggressively than other assets, sometimes for weeks, and frequently ignore a hard refresh entirely. This causes a great deal of confusion during redesigns.
The reliable fix is a version query on the href:
<link rel="icon" href="/icon-32.png?v=2">Changing the query changes the URL as far as the cache is concerned, and the new icon appears immediately. Bump the number whenever the icon changes.
Where to put the files
The site root is conventional and it saves trouble. Various tools, feed readers and
crawlers request /favicon.ico without reading your HTML, so serving something
there keeps your error logs quiet even though modern browsers do not need it.
Reference everything with absolute paths beginning with a slash. Relative paths break on any page that is not at the root, which typically means the icon appears on your home page and vanishes everywhere else.
The manifest
The web manifest is a small JSON file that tells Android and installable web apps what your site is called and which icons to use. Without it, adding your site to a phone home screen produces a screenshot of the page rather than an icon.
Two fields are worth understanding. theme_color tints the browser toolbar on
Android, and background_color is painted behind the splash screen while the
app loads, so it should match your page background rather than your brand colour if you
want the transition to look seamless.
Frequently asked questions
What favicon sizes do I actually need?
Far fewer than the old advice suggests. A 32 pixel PNG, a 180 pixel Apple touch icon, and 192 and 512 pixel versions for the web manifest cover essentially everything in use today. An SVG on top of that is a bonus for browsers that support it.
Do I still need favicon.ico?
Only if you support very old browsers. Every current browser reads PNG favicons happily. Some tools still request /favicon.ico from the site root by default, so serving something there avoids noise in your logs, but it is not required for the icon to work.
Why does my favicon look like mush?
Because it is being displayed at 16 or 32 pixels and the design has too much detail. A logo with fine lines, a wordmark or a photograph all turn to porridge at that size. Favicons need one strong shape and high contrast, which usually means a simplified version of your logo rather than the logo itself.
Is my image uploaded anywhere?
No. Everything is resized and encoded on a canvas in your browser, and the files are created locally when you download them. The image never leaves your device.
Why has my favicon not updated?
Browsers cache favicons unusually aggressively, sometimes for weeks and often ignoring a normal hard refresh. Adding a version query to the href, such as /icon-32.png?v=2, is the reliable fix.