⭐ Favicon Generator

Drag & drop a PNG or SVG, generate all sizes (16 / 32 / 48 / 64 / 180 apple-touch / 192 / 512), download as ZIP, and copy the HTML snippet.

100% Free No signup Browser-only 5 languages Dark mode

🔒 About Privacy

・All processing happens entirely in your browser
・Image data is never sent to any server
・No storage logs, no upload history, no database
・No signup, no login, no payment ever

📂

Drag & drop a square PNG or SVG (512x512 or larger recommended)

📖 Where people get stuck

Turns a square PNG or SVG into every size you need, bundles them as a ZIP, and generates the HTML snippet for your <head>. Everything runs in the browser. Producing the files and having them actually show up are two different problems: browsers, operating systems and search engines each fetch favicons by their own rules, and the caching is unusually aggressive, so unless your procedure includes how to verify, you will get caught out.

Case	What happens	What to do
The old icon keeps showing after you replace it	A favicon goes into a cache separate from the page HTML and is not re-fetched by an ordinary reload. Chrome keeps a dedicated favicon database, and even a hard reload (Ctrl+Shift+R) does not always clear it. The bookmarks bar, the tab, history and OS shortcuts each refresh on their own schedule, so a new icon in the tab alongside the old one in bookmarks is entirely normal. If there is a CDN in front, it holds a stale copy too.	Changing the filename or adding a query string is the reliable move: point at `<link rel="icon" href="/favicon-v2.png">`, or at minimum append `?v=2`. Verify in a private window — reloading the normal one over and over just re-reads the same stale cache and wastes your afternoon. If a private window still shows the old icon, the problem is probably not caching but a wrong path in the `<link>`, so check the Network tab and see whether the file is actually being fetched; a 404 shows up immediately.
At 16px the logo turns to mush	What appears in a browser tab is effectively 16 by 16 (32 by 32 on high-DPI screens). Scale a logo down as is and any stroke below one pixel disappears while thin lettering collapses into grey mush. A wordmark with more than a couple of characters is hopeless — at a glance it reads as a grey square. This is not an export-quality issue but a physical limit on how much information fits: 16 by 16 is 256 pixels, barely enough to draw one character.	Design 16px and 32px separately. Use a single large initial, crop to just the symbol, or thicken every stroke to at least 2px — this is exactly why the favicons of large services are all extremely simple. Pairing an SVG favicon (`<link rel="icon" type="image/svg+xml">`) with PNGs lets the full design appear at large sizes while only the small size is substituted (you cannot use `@media (max-width: 16px)` inside the SVG, so in practice you supply separate PNGs and route them with the `sizes` attribute). Always judge at actual size — evaluating a zoomed preview is how this goes wrong.
Adding to the iOS home screen turns the background black	If you hand `apple-touch-icon` a transparent PNG, iOS fills the transparency with black (white in some contexts). Even when the design intends to sit on no background, the OS insists on an opaque square. By the same logic, rounding the corners yourself gets those corners rounded twice and clipped. Almost every case of an oddly ugly home-screen icon is one of these two.	Turn on the background colour option here and export an opaque image painted to the edges of the square. Do not round the corners, and leave roughly ten percent of the canvas as a safe margin, because the OS rounding will clip a design that runs to the edge. Supplying 180 by 180 covers current iPhones and iPads. If you omit `<link rel="apple-touch-icon">` entirely, iOS uses a screenshot of the page as the icon — that is the explanation whenever someone finds tiny page thumbnails on their home screen.

<link rel="icon"> and the icons array in site.webmanifest are different things and you need both. The first is for browser tabs, the second for the Android home screen and PWAs, and updating only one is a common way to end up with a stale icon on Android alone. Search results have their own rules: Google looks at the site root, so always place a /favicon.ico, and it prefers multiples of 48 (48, 96, 144 and so on) — supply only 16 by 16 and it will be upscaled and blurry in the results. The easy thing to forget is not blocking the icon directory in robots.txt: a broad rule such as Disallow: /assets/ means the favicon alone cannot be fetched and the results show the default globe. Changes take days to weeks to appear, so do not judge this right after a release.

📖 How to Use

1

Load image

Drag and drop a square PNG or SVG. 512x512 or larger recommended.
2

All sizes auto-generated

16 / 32 / 48 / 64 / 180 apple-touch / 192 / 512 px are previewed. Optional background color.
3

Get ZIP and snippet

Download the ZIP and paste the shown HTML snippet inside your <head>.

❓ Frequently Asked Questions

Is my image uploaded?

No. Everything is done in-browser via Canvas API and JSZip.

Will SVG input become blurry?

SVG is vector — it rasterises crisply at every size.

Is an .ico file generated?

Modern browsers fully support PNG favicons, so we ship PNG only. Rename favicon-32x32.png if you really need .ico.

🔗 Related Tools

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.