Favicon Generator
Turn any image into favicon and app icon sizes
Favicon Generator tool
Favicon Generator: key facts
- What it does
- Turn any image into favicon and app icon sizes
- Category
- Generators
- Cost
- Free, with no account, sign-up, or install.
- Your data
- Runs entirely in your browser — the files and text you enter are never uploaded to a server.
- Last reviewed
- . Report an incorrect result.
What this tool is for
A favicon is the tiny logo that sits in the browser tab, the bookmarks bar, and the home screen when someone saves your site — and getting one out of a single logo file usually means wrestling with an image editor. This generator skips all of that: drop in one PNG, JPG, or WebP and it produces every size a modern site needs in one pass.
Behind the scenes it draws your image onto an HTML5 canvas and rescales it to 16×16, 32×32, 48×48, 180×180, 192×192, and 512×512 — the set that covers browser tabs, the Apple touch icon iOS uses for home-screen shortcuts, and the larger icons Android and progressive web apps reference in a manifest. Non-square images are centre-cropped to a square rather than squashed, so a wide logo still looks right.
Designers handing off a brand mark, indie developers shipping a side project, and anyone replacing the default Next.js or WordPress icon will find it faster than exporting sizes by hand. The "Download All" button bundles every PNG plus a ready-to-paste block of link tags into a single ZIP.
How to use the Favicon Generator
- Drag an image onto the upload zone, or click to browse — PNG, JPG, and WebP are accepted.
- Wait a moment while each size is rendered; the preview grid fills in automatically.
- Toggle the light/dark background button to check how the icon reads against both browser themes.
- Click "Download All (.zip)" for the full set, or grab a single size with its individual PNG link.
- Open the included favicon-snippet.html and paste the link tags into your page's head.
Six sizes, and the markup to reference them
An upload is resized to the six sizes that actually get used: 16 and 32 pixels for browser tabs and bookmarks, 48 for Windows shortcuts, 180 for the Apple touch icon, and 192 and 512 for Android and progressive web app manifests. The tool also produces the link markup to reference them.
Supplying several sizes rather than one matters because scaling is not free. A browser downscaling a 512-pixel icon to 16 pixels produces mush, whereas a purpose-made 16-pixel icon can be drawn to read clearly at that size.
Everything is generated locally from your file, which is not uploaded.
- 16 and 32 pixels cover browser tabs; 180 is the iOS home-screen icon.
- 192 and 512 are the sizes a web app manifest expects.
- Placing the files at the site root and adding the link tags is all the wiring required.
What the Favicon Generator gets right
- Everything runs locally on a canvas in your browser — your logo is never uploaded to a server, so unreleased branding stays private.
- One upload yields the complete modern set, including the 180×180 Apple touch icon and the 192/512 sizes PWAs need, not just a lone 16×16.
- The light/dark preview catches the common mistake of a dark icon that vanishes against a dark tab strip before you ship it.
- The ZIP ships with the exact HTML link tags, so wiring the favicon into your site is copy-and-paste rather than guesswork.
Designing something legible at 16 pixels
A favicon is a 16-pixel square in the context that matters most, and almost nothing survives that reduction. A full logo becomes an indistinct smudge; a wordmark becomes a grey line. What works is one element — a single letter, a distinctive shape, a strong silhouette — with high contrast and no fine detail. If your logo has a symbol that stands alone, that is your favicon.
Two technical details are worth knowing. Browsers cache favicons unusually aggressively, so a change may not appear for a long time even after a hard refresh — a version query string on the URL is the reliable way to force it. And a transparent background is generally better than white, since it works in both light and dark browser themes rather than showing as a bright square in dark mode.
The classic multi-resolution ICO file is still worth having at the root as /favicon.ico, because some clients look for it there by convention regardless of your link tags. SVG favicons are now widely supported too, and have the advantage of scaling cleanly and adapting to theme — though a PNG fallback remains sensible.
Frequently Asked Questions
What favicon sizes do I actually need in 2025?
For broad coverage you want 16×16 and 32×32 for browser tabs, 180×180 for the Apple touch icon used by iOS home screens, and 192×192 plus 512×512 referenced by your web app manifest for Android and PWAs. This tool generates all of them at once.
Does this create a real .ico file?
No — it outputs PNG icons, which every current browser supports via link tags, plus a conventional favicon.png. The legacy multi-resolution .ico format is not produced here; if you specifically need favicon.ico, point your 32×32 PNG through a dedicated ICO converter.
Is my uploaded image sent anywhere?
It is not. The file is read with the browser FileReader API and drawn to a canvas entirely on your device. Nothing is transmitted, which makes the tool safe for logos that have not been announced yet.
My logo is rectangular — will it be distorted?
No. A non-square source is scaled to cover the square and centred, so it is cropped rather than stretched. For the cleanest result, start from a square image or one with even padding around the mark.
