How to Generate a Favicon
A favicon is the small icon in a browser tab, and getting it right is more fiddly than it should be. Browsers want a real .ico file. iPhones want a 180-pixel apple-touch-icon. Android and PWAs want 192 and 512 pixel PNGs referenced from a manifest. Miss one and your site shows a blank page icon somewhere. This tool produces the complete set from a single image, plus the exact HTML to paste — and it builds a genuine multi-size .ico, not a renamed PNG.
Upload your logo
A square image works best. PNG with a transparent background is ideal, since it adapts to both light and dark browser themes.
Choose the styling
Add a background colour if your logo needs one, or round the corners for an iOS-style squircle. The preview shows real pixel sizes.
Download the package
You get a ZIP with favicon.ico, every PNG size, the apple-touch-icon, a web manifest and the HTML snippet.
Designing an Icon That Works at 16 Pixels
This is where most favicons fail. A logo designed for a website header has detail, text and fine lines — and at sixteen pixels square, all of it turns to mush. The preview above deliberately shows you the real sizes, because the 16-pixel version is the one people actually see all day in their tab bar.
The rule is radical simplification. One letter, one shape, one strong silhouette. Look at the favicons of sites you use constantly: almost none of them are the full logo. They are a single glyph or mark, in high contrast, with no fine detail whatsoever. If your logo contains a company name, use just the initial or the symbol.
Contrast matters as much as simplicity. The icon sits against a browser chrome that may be light or dark depending on the user's theme, so a design that relies on being on white will vanish for half your visitors. A transparent PNG that reads clearly on both is the safest choice — which is why it is the default here.
Which Files Do You Actually Need?
| File | Used By | Required? |
|---|---|---|
| favicon.ico | Every browser — requested from the site root automatically | Essential |
| favicon-32x32.png | Modern browser tabs and bookmarks | Essential |
| apple-touch-icon.png | iOS home screen shortcuts (180px) | Recommended |
| 192 & 512px + manifest | Android, PWA install prompts, splash screens | Recommended |
Frequently Asked Questions
How do I create a favicon from an image?
Upload your logo, choose a background and corner style, and click Generate. You get a ZIP containing a real favicon.ico, every PNG size, the apple-touch-icon, a manifest and the HTML to paste.
What size should a favicon be?
There is no single size - that is the whole problem. Browsers want 16 and 32 pixels, iOS wants 180, Android and PWAs want 192 and 512. This tool generates all of them from one source image.
Is this a real .ico file or a renamed PNG?
A real, properly structured multi-size ICO containing 16, 32 and 48 pixel images. Many online generators simply rename a PNG, which works inconsistently. This one builds the actual ICO binary format.
Where do I put the favicon files?
Upload all of them to the root directory of your website, then paste the provided HTML snippet into the head section of your pages. Browsers look for favicon.ico at the root automatically.
Why doesn't my new favicon show up?
Browsers cache favicons very aggressively - often for days. Try a hard refresh, open the site in a private window, or append a query string to the icon URL to force a reload.
What image should I use as a favicon?
A simple, high-contrast mark - one letter or one symbol. Full logos with text become unreadable at 16 pixels. Look at the preview above at real size before committing.
Should the background be transparent?
Usually yes. A transparent PNG adapts to both light and dark browser themes, whereas a white background will show as a white box for users on dark themes.
Do I still need favicon.ico in 2026?
Yes. Browsers still request it from the site root by default, even without any HTML pointing to it - so shipping one avoids a 404 on every page load and guarantees an icon everywhere.
What is apple-touch-icon.png for?
It is the icon iOS uses when someone adds your site to their home screen. Without it, iOS renders a screenshot of your page instead, which looks unprofessional.
Is my image uploaded to generate the favicon?
No. Everything is generated inside your browser - your logo is never uploaded to any server, never stored, and never seen by anyone.
Can I use a photo as a favicon?
You can, but you should not. Photos have far too much detail to survive being scaled to sixteen pixels. A flat graphic mark is the only thing that reads clearly at that size.
Is this favicon generator really free?
Completely free, with no limits, no signup, no watermark and no premium tier. Everything runs in your browser, so there are no server costs to pass on.
Last updated: July 11, 2026 · FlipMyFormat Favicon Generator
Written and maintained by the FlipMyFormat team