Favicon Generator
Turn a logo — or a single letter — into every icon file a website needs. Drop an image below, check how it holds up at 16 pixels, and download the complete set. Free, and nothing is uploaded.
You get favicon.ico with all three Windows sizes packed inside it, PNGs for browser tabs, an Apple touch icon for iOS home screens, the two Android icons Chrome needs before it will offer to install your site, a web manifest, and the exact HTML to paste into your head. Nothing extra, nothing missing — every file in the zip is one a browser actually asks for.
A square PNG with a transparent background works best. Anything non-square gets fitted or cropped — you choose which, once it's loaded.
How to make a favicon for your website
- Add a logo or pick a letter. Drop in a square PNG or JPG — 512×512 or larger gives the sharpest result — or switch to the letter mode and type an initial instead.
- Adjust it for small sizes. Set the padding, corner rounding, and background colour, and choose whether a non-square image is fitted or cropped. Check the 16-pixel preview, which is the size most visitors will ever see.
- Download the set. Download the zip: favicon.ico, PNGs for every size, the Apple touch icon, the Android icons, and site.webmanifest.
- Upload and paste the HTML. Put the files in your site's root directory — not a subfolder — and paste the generated snippet into your page's head section.
Frequently asked questions
What files do I actually need for a favicon?
Fewer than most guides claim, but more than one. You need favicon.ico for older browsers and Windows, favicon-16x16.png and favicon-32x32.png for modern browser tabs, apple-touch-icon.png at 180×180 for iOS home screens, and 192px plus 512px PNGs referenced from a web manifest for Android. This tool generates exactly those, plus the manifest, so you don't have to work out which of the twenty files older tutorials list are still relevant. Most aren't — the Windows 8 tile tags and the IE-era "shortcut icon" relation are both dead, and they're deliberately left out. There's no loose 48×48 PNG either: 48px genuinely matters on Windows, but it's read from inside favicon.ico, so shipping it twice would just be a file nothing ever requests.
Where do I put the files?
In the root directory of your site, so they sit at yoursite.com/favicon.ico rather than yoursite.com/images/favicon.ico. This trips people up constantly. iOS in particular looks for /apple-touch-icon.png by that exact name and path, so moving it into a subfolder breaks the home-screen icon even if your HTML points at the new location. The zip includes a README repeating this.
I uploaded it and my old favicon is still showing.
Almost always browser caching, not a mistake in your files. Browsers cache favicons far more aggressively than other assets and will keep showing an old icon — or the blank default — long after the new one is live. Hard-refresh with Ctrl+F5 (Cmd+Shift+R on a Mac), or open the site in a private window, which is the quickest way to see what a first-time visitor actually gets.
What size should my source image be?
At least 512×512, and square if you can manage it. Everything here is downscaled from your source, so a larger original gives sharper results at every size — and 512 is the largest icon in the set, so anything smaller means enlarging it. If your image isn't square you can choose between fitting the whole thing inside the icon with margin, or filling the square and cropping the overflow.
Will my logo be readable at 16 pixels?
Often not, and that's why the preview shows a real 16-pixel render rather than a scaled-up one. A detailed logo or a full wordmark turns to mush at tab size. The usual fix is to use just the symbol from your logo, or a single initial — that's what the letter mode is for. Judge it at 16px in the preview above, because that's the size most people will ever see it at.
Why does the .ico file contain several sizes?
Because Windows picks a different one depending on where the icon appears — 16px in a browser tab, 32px in the taskbar, 48px on the desktop. An .ico holding a single 32×32 image forces the system to scale it for the other two, which looks soft at 48 and muddy at 16. The one generated here contains all three at native resolution.
Are my images uploaded anywhere?
No. Every icon is rendered in your browser and the zip is assembled on your device — the image never leaves your computer. That's worth knowing here because a logo is often unreleased when someone is building the site around it.