Favicon Generator
Upload a square image and get every favicon size, plus the link tags and web manifest entries to go with them. Everything is generated in the browser using canvas, so your logo is never uploaded.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
- Updated Sep 2026
Drop a square image here, or click to choose one
512×512 or larger works best · processed locally, never uploaded
How it looks at real sizes
At a glance
- Input
- Any square image; 512×512 or larger is ideal
- Produces
- 16, 32, 48, 180, 192 and 512 pixel PNGs
- Also gives
- HTML link tags and a web manifest
- Format
- PNG — universally supported, and SVG is better still where you can use it
- Processing
- Entirely client-side
- Cost
- Free, no account
Which sizes you actually need
Favicon guidance has accumulated decades of legacy advice recommending a dozen files for browsers nobody uses. The genuinely useful set in 2026 is short:
| Size | Used for | Needed? |
|---|---|---|
| 32×32 | Browser tabs and bookmarks | Yes |
| 180×180 | Apple touch icon, iOS home screen | Yes, if iOS matters |
| 192×192 | Android home screen, via the manifest | Yes, for installable sites |
| 512×512 | Android splash screen and app listings | Yes, for installable sites |
| 16×16 | Older browsers and some UI contexts | Optional |
| 48×48 | Windows site shortcuts | Optional |
An SVG favicon is better than any of them where you can use one: a single file, sharp at every size, and able to respond to the user's dark mode with a media query inside the SVG. Every current browser supports it. Keep a 32×32 PNG alongside as a fallback and you have covered everything.
One legacy item still worth keeping: a favicon.ico at the site root. Nothing
needs the link tag for it any more, but browsers and crawlers still request that path, and a
file there avoids a stream of 404s in your logs.
Designing something legible at 16 pixels
A favicon is often rendered at 16 by 16 pixels — around a quarter of a centimetre. Most logos are unrecognisable at that size, and simply shrinking one produces a grey smudge.
What works: a single letter or a single shape. Your logo's mark without its wordmark. One initial. A distinctive silhouette. High contrast against both light and dark backgrounds, since browser chrome differs and dark mode is common. No fine detail — anything thinner than about two pixels at final size disappears. Generous padding, because the icon is rendered small and tight crops read as cluttered.
What fails: full wordmarks, gradients, thin strokes, anything with more than two or three colours, and photographs. If you are unsure, look at the preview on this page at 16 pixels — if you cannot tell what it is, neither can anyone else.
A practical test: shrink your candidate to 16 pixels, then look at it beside a dozen other browser tabs. The job of a favicon is to be identifiable in that crowd, not to be beautiful in isolation.
Getting a favicon to actually update
Favicons are cached more aggressively than almost anything else on the web, and browsers frequently ignore normal cache headers for them. A changed favicon that still shows the old one is the most common complaint, and it is usually not a mistake on your part.
What works: add a version query string to the link tag —
<link rel="icon" href="/favicon-32.png?v=2">. That is the most reliable
method. Failing that, change the filename entirely. A hard refresh sometimes helps; clearing
the browser's cache usually does; and in Chrome specifically, the favicon cache is separate
from the normal cache and can persist through both.
Bear in mind that search engines cache favicons separately again. Google shows one beside your result on mobile and desktop, and can take weeks to refresh it after a change. There is no way to force that — it updates when the site is next crawled and processed.
Two things that break favicons entirely, both worth checking: serving the file with the wrong MIME type, and blocking the path in robots.txt. Google will not show a favicon it is not allowed to fetch.
How to use the Favicon Generator
-
Upload a square image
512×512 or larger gives the best results. A non-square image is centred and padded rather than stretched.
-
Check the 16-pixel preview
This is the size that matters most and the one most designs fail at. If it is not identifiable there, simplify before going further.
-
Download the icons
Each size downloads as a PNG. Put them at your site root, or in a folder and adjust the paths in the HTML.
-
Add the HTML and manifest
Copy the link tags into your
<head>and the manifest JSON intosite.webmanifest.
Frequently asked questions
What favicon sizes do I actually need?
For most sites: 32×32 for browser tabs, 180×180 for iOS, and 192×192 plus 512×512 for Android if the site is installable. Older guides list a dozen more for browsers that no longer exist. An SVG favicon with a 32×32 PNG fallback covers nearly everything on its own.
Should I use SVG or PNG?
SVG where you can — one file, sharp at every size, and it can respond to dark mode with a media query inside the SVG. Every current browser supports it. Keep a 32×32 PNG alongside as a fallback, and a favicon.ico at the root so crawlers requesting that path do not 404.
Why has my favicon not updated?
Favicons are cached exceptionally aggressively, and Chrome keeps a separate favicon cache that survives a normal cache clear. Add a version query string to the link tag — ?v=2 — which is the most reliable fix. Search engines cache them separately again and can take weeks.
Do I still need favicon.ico?
Not as a link tag, but a file at the root path is still worth having. Browsers and crawlers request /favicon.ico regardless of what your HTML says, and having something there avoids a steady stream of 404s in your logs.
Does a favicon affect SEO?
Not as a ranking factor. Google does show it beside your result on mobile and desktop, so a recognisable one can affect click-through rate. Make sure the file is not blocked in robots.txt — Google will not display an icon it cannot fetch.
Is my image uploaded?
No. Resizing happens on an HTML canvas inside your browser, and each PNG is generated locally. Your logo never leaves your machine.