Favicon Generator
Turn any image into the full favicon set, then download a real multi-resolution favicon.ico, the PNGs, and site.webmanifest as one ZIP. All in your browser.
- Free, no account
- No watermark
- No usage limit
About the Favicon Generator
Drop in one image and get the whole favicon package back in a single ZIP, a real multi-resolution favicon.ico, every PNG size a browser or phone asks for, a filled-in site.webmanifest, and a README with the exact tags to paste. It all happens on your own device. Your artwork is never uploaded and never touches a server, which is more than the big-name generators can say, since most of them make you hand your logo to their backend first.
The filenames in the ZIP already match the tags, which removes the single most common favicon failure. A mismatch between what you downloaded (yourlogo-32x32.png) and what the tag points at (/favicon-32x32.png) is why a favicon just refuses to show up. The file exists and so does the tag, but they use different names. In this package the filenames already match the tags, so that mismatch does not happen. Unzip into your site root and paste in the tags, then reload.
How to use
- Add your image. Click the box and pick a file, or drag one in, or paste a copied logo straight from your clipboard. PNG, JPG, SVG, and WebP all work. A square source with a transparent background gives the cleanest result, and vector art scales sharpest of all.
- Check the previews. Every size renders on a checkerboard so you can spot a stray white box or a clipped edge. The 16 and 32 versions show at true pixel size on purpose, so you judge them the way a visitor will actually see them.
- Set the name and color (optional). Type your site name and pick a theme color. Both flow straight into the
site.webmanifestand thetheme-colortag, so the manifest is real and ready instead of a placeholder you have to edit later. - Download the package. Hit "Download package (ZIP)" for everything at once, or grab a single PNG from any preview if that is all you need.
- Drop the files in your site root and paste the tags. Copy the six lines from the snippet box into the
<head>of every page. The names line up with the files, so nothing needs renaming. - Reload and confirm. Check the tab. Old icon still hanging around? That is caching, covered further down.
What you actually get in the package
Most "favicon generators" hand you loose PNGs and leave the rest to you, while this one gives you the finished set.
A real favicon.ico. Plenty of generators just rename a PNG and call it an .ico. This one builds an actual multi-resolution icon with the 16, 32, and 48 pixel versions bundled inside one file, right here in your browser. Drop it at your site root and browsers old and new find it, even with no tags at all. Almost no privacy-first tool makes that fallback locally.
The PNGs every surface needs, 16 and 32 for the tab, 180 for the Apple touch icon, 192 and 512 for Android and installable apps, all named to match the tags out of the box.
A working site.webmanifest, filled in with your site name, theme color, and the 192 and 512 icons, so an Android install prompt shows your icon and name instead of a gray square.
A README with plain-language install steps and the exact tags, so you or a client can follow it without knowing a thing about favicons.
Which favicon sizes actually matter
Eight sizes looks like overkill until you see what each one does, though most sites really ship only five. 16 and 32 are the browser tab icons, 32 being the sharper one for high-DPI screens. 180 is the Apple touch icon iOS uses on the home screen. 192 and 512 are the Android and PWA icons, pulled from the manifest, with 512 also feeding the splash screen and the adaptive-icon mask. The middle band, 48, 64, and 128, covers Windows pinned sites and a few Chrome contexts. None of those three is essential. 48 rides along inside the .ico, while 64 and 128 stay out of the package and sit in the preview grid with their own download button, there if you want them and not cluttering your site root if you do not.
favicon.ico, PNG, or SVG: which format to serve
Three formats, and they cover different eras of the web rather than competing head to head. PNG is the practical default, read by every browser in the last decade and declared with a <link rel="icon"> tag so the browser picks whichever size fits. favicon.ico is the old container that holds several sizes in one file, and its real value today is the tagless fallback, since a browser looks for /favicon.ico at your root even when the tags are missing. This tool builds you a proper one, no separate converter needed. SVG is the newest and sharpest, a vector icon that scales with no blur, but Safari and older browsers are patchy on it, so you never ship it alone.
For a normal site: the .ico at your root, the PNGs and manifest from this package, and an SVG on top only if your logo is already vector.
Designing an icon that survives 16 pixels
An icon that looks sharp at 512 can turn to mush at 16, because 16 by 16 is only 256 pixels total. Thin lines vanish and fine text blurs into an unreadable gray. A detailed illustration loses its shape entirely. The icons that read well small are the simple ones, and the low pixel count forces that. So use one idea rather than your whole logo, keep the symbol and drop the wordmark, fatten your strokes since a hairline disappears at that size, and push the contrast because the icon sits against a tab color that shifts with the theme. Judge it at real size in the small previews, not zoomed in. A single bold brand letter on a transparent background usually reads better small than an over-detailed logo.
Why your favicon won't update
You uploaded the new files, reloaded, and the old icon is still showing in the tab. Nine times out of ten the cache is holding on to the old one, and your files are fine. Browsers cache favicons harder than almost any other asset, figuring the tab icon rarely changes.
The most reliable fix is a cache-busting query, change the tag to href="/favicon-32x32.png?v=2" and bump the number whenever you swap the icon, which the browser reads as a brand-new file. A hard refresh (Ctrl+Shift+R, or Cmd+Shift+R on Mac) sometimes shakes it loose, and an incognito window starts with no cache at all, so if the new icon shows there, your files are fine and the rest is just the cache catching up. Search engines and social previews cache on their own slow schedule, so give them a few days.
Frequently asked questions
Does this really make a proper favicon.ico, or just a renamed PNG?
A proper one. It packs the 16, 32, and 48 pixel versions into a single genuine .ico file, the multi-resolution format browsers and Windows have read for years, and it does the whole thing on your device. So the file at your site root behaves like a real icon, not a PNG that was simply renamed to .ico. That matters for the tagless fallback, where a browser reaches for /favicon.ico directly.
Do the filenames in the ZIP match the tags automatically?
Yes, and that is deliberate. The PNGs come out named favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, and so on, which is exactly what the copied tags reference. Unzip into your site root and the tags find every file with zero renaming. Mismatched names are the top cause of a favicon silently failing, so the package removes that step entirely.
What source image gives the sharpest icons?
A square image, at least 512 pixels a side, with a transparent background. If you have vector art, feed the SVG in, because it scales cleanly at every size before shrinking down, so the small icons come out crispest. A high-resolution PNG is the next best pick. Avoid a small JPG, its compression artifacts get amplified when shrunk to 16 or 32, leaving fuzzy edges on exactly the sizes people see most.
Why does 16 by 16 look rough in the preview?
Because 16 by 16 really is tiny, and the preview shows it at true size with no flattering blur, so you see what a visitor sees. A little blockiness at that size is normal. If it looks unrecognisable rather than crisp-and-blocky, the source art is too busy for the slot. Simplify to one bold shape or a single letter with thick strokes and it will hold up.
My logo is a wide rectangle, what happens?
It gets squeezed into a square at each size, which distorts it. Crop your source to a square first, boxing the most recognisable part of the mark, then bring that in. If the brand is a wide wordmark that cannot be squared, use just the initial or the symbol. A clean cropped icon always reads better small than a stretched one.
What does the theme color actually change?
It sets the theme-color tag and the manifest color, which some browsers use to tint the address bar or toolbar to match your site, and which Android uses around the app when your site is installed. It does not recolor your icon, that stays whatever you uploaded. If you are not sure, leaving it white is a safe, invisible default.
Do I still need the tags if I just drop favicon.ico at the root?
For the plain tab icon, no, browsers find /favicon.ico on their own. But that fallback only covers the classic tab. It will not serve the Apple touch icon for iOS home screens or the 192 and 512 icons for Android and installed apps, those need the apple-touch-icon tag and the manifest. So the root .ico is a fine safety net, and the tags are what make your icon look right on phones and in installed apps.
Is my image uploaded anywhere?
No. The whole thing happens inside your browser. Your file is read on your own machine, resized locally, packaged locally, and never sent over the network. It keeps working with no internet once the page has loaded. Nothing to leak, nothing to trust a server with.