TidyTools16 pixels is the size that matters
Every favicon generator will happily shrink your logo to 16 × 16 and hand you the files. Almost none show you the result at actual size, which is why so many sites end up with a tab icon that's an indistinct grey smudge.
Sixteen pixels square is 256 pixels in total. A wordmark is unreadable at that size. A logo with fine lines loses them. A detailed illustration becomes noise. What survives is a single bold shape with high contrast — one letter, a simple mark, a solid silhouette. The preview above shows the real thing at real size, in a mock tab, so you can judge it before you ship it rather than after.
If your logo doesn't survive the shrink, the answer isn't a better generator — it's a simplified mark drawn specifically for small sizes. Plenty of well-known brands use a different icon in the tab from the one on their letterhead, for exactly this reason.
Why it's more than one file
A modern site needs several icons because several different systems want one, at different sizes and with different rules:
favicon.ico— the browser tab and bookmarks. It's a container holding 16, 32 and 48 pixel versions, and the browser picks. Old, still expected, still the safest default at the site root.- PNG favicons at 16 and 32 — what modern browsers prefer when offered, and sharper than the ICO on high-density screens.
apple-touch-icon.pngat 180 — the icon iOS uses when someone adds your site to their home screen.- 192 and 512 PNGs — Android and installable web apps, referenced from the web manifest.
The Apple transparency trap
This one catches people. iOS does not support transparency in the home-screen icon: it composites any transparent area onto black. A logo designed to sit on a white page, saved with a transparent background, becomes a dark tile with an invisible mark on it.
So the Apple icon generated here is always given a solid background. If you've chosen a transparent background for the others, white is used for that one, and the preview shows what iOS will actually display. This is the single most common favicon mistake and it only ever shows up on a real device.
Where the files go
Put every file in the root of your site, next to your home page, then paste the snippet above into your <head>. The root matters: browsers look for /favicon.ico there by default even without any HTML telling them to, which is why that one file at that one location is the reliable fallback.
If the icon doesn't change after you deploy, it's cached. Favicons are cached unusually hard — try a private window, and give it a day before assuming something is wrong.
Frequently asked questions
Is my logo uploaded anywhere?
No. Every file is generated in your browser and packed into a ZIP on your own machine. There is no server, no account and nothing stored — which matters if the logo belongs to a project that hasn't launched.
What size should the image I upload be?
Square and at least 512 × 512. Bigger is fine. A non-square image is centre-cropped to a square first, so anything important should be near the middle.
Can I use an SVG?
Yes, if your browser can render it — it's rasterised at each size. A large PNG works just as reliably.
Why does the Apple icon have a background when I chose transparent?
Because iOS renders transparency in home-screen icons as black, which almost always looks wrong. A solid background is used for that file only, so what you see in the preview is what a phone will show.
Do I still need favicon.ico?
Yes. Browsers request /favicon.ico from the site root whether or not your HTML mentions it, so having it there prevents a 404 on every page load and covers older software.
Why hasn't my favicon updated?
Caching, almost always. Favicons are cached much more aggressively than other assets. Check in a private window first, and don't conclude anything is broken until a day has passed.
Is there a watermark or a limit?
Neither. The files are yours, nothing is added to them, and there's no sign-up.