Overview
A favicon is the smallest piece of branding a website owns — the tiny picture in the tab, the bookmark list and the history dropdown that helps a visitor find your page again among forty open tabs. It's also a quietly fiddly asset to produce, because browsers don't want one icon; they want a family of them at several exact sizes, and phones want another for the home screen. Making those by hand means four separate exports and four chances to mistype a dimension.
This generator collapses the errand into one step. Hand it an image and it centre-crops and scales it into 16, 32 and 48-pixel PNGs plus the 180-pixel touch icon Apple devices request. Or skip artwork entirely with letter mode: one character, two colours, and a clean legible mark at every size. At sixteen pixels a detailed logo turns to soup anyway, so the letter is often the smarter choice.
What is a favicon, exactly?
The name is a fossil from the early web — 'favourite icon', from when bookmarks were called favourites. Today browsers show the icon in tabs, pinned sites, phone search results and the tile a user saves to their home screen. Each spot asks for a different size so the picture stays crisp everywhere from a dense laptop display to a large phone icon. The sizes on this page — 16, 32, 48 and 180 pixels — cover the ones that actually matter.
A missing favicon isn't fatal, but it's noticeable: the browser substitutes a dull generic globe and the site instantly looks unfinished. A good one does the opposite — it makes a tab recognisable at a glance, which is worth real attention in a sea of open tabs. It's the cheapest branding upgrade a website can get, and now it takes about a minute.
Features
- Two starting points. Begin with any image, or switch to letter mode and skip artwork entirely.
- Smart centre-crop. Wide or tall pictures are cropped to a square automatically — favicons are always square.
- Four real sizes. 16, 32 and 48-pixel PNGs plus the 180-pixel Apple touch icon, each at true pixel dimensions.
- Letter mode. One character with your choice of background and letter colours — legible even at 16 pixels.
- True-size previews. See each icon at its actual size before downloading; yes, the first one really is that small.
- Individual downloads. Grab all four at once or take them one by one as you need them.
- Made on your machine. All drawing happens locally in your browser — your logo never gets uploaded.
Benefits
- Look finished. No more generic globe in the tab — your site gets its proper badge everywhere.
- One step, four files. Skip the repetitive manual exports and their mistyped dimensions.
- Legible at tiny sizes. Letter mode stays readable where detailed logos dissolve.
- Free and private. Your artwork stays on your device; there is no account and no watermark.
Who can use it
Anyone launching a website, from weekend bloggers to small businesses — a missing favicon is the classic 'almost done' tell. Developers spinning up landing pages and side projects get all four sizes in a minute. Designers can prototype a letter mark for a client before the real logo exists. And hobbyists with a personal site finally have no excuse: pick a letter, pick two colours, download. If your site's tab still shows the browser's default globe, this page fixes it faster than reading this paragraph.
How to use
- Choose your starting point: upload an image, or switch to 'A letter' mode.
- For letter mode, type one character (one reads best at tiny sizes) and pick background and letter colours.
- For image mode, drop in a square-ish logo — wide or tall images are centre-cropped automatically.
- Check the true-size previews to confirm everything reads clearly.
- Download all four icons and place them with your website's files.
Frequently asked questions
What favicon sizes do I actually need?
16×16 is the classic tab icon every browser requests. 32×32 covers high-density displays and taskbar shortcuts. 48×48 is used by some desktop shortcuts and older systems. 180×180 is the Apple touch icon for iPhones and iPads when someone saves your site to their home screen. Together, these four cover effectively everything that matters; the dozens of other sizes in old tutorials are legacy cruft from browsers long gone.
Should I use my logo or a letter?
It depends on your logo's simplicity. A bold, simple mark survives shrinking beautifully — think one strong shape. A detailed logo with fine lines or text turns to mush at 16 pixels, and that's where letter mode wins: one character in two strong colours stays legible at every size and looks deliberate rather than compromised. When in doubt, try both previews side by side at true size and trust your eyes.
Where do I put the downloaded files?
With the rest of your website's files, typically at the site root or in an images folder, then reference them in your HTML's head section with link tags. The 180-pixel file is conventionally named apple-touch-icon.png. Most static hosts and site builders serve them with zero configuration once the files are in place. If an old icon keeps showing after an update, hard-refresh — browsers cache favicons aggressively.
My logo is wide, not square — will it work?
Yes. The generator centre-crops wide or tall images to a square automatically, since favicons are always square. The trade-off is that the edges get trimmed, so a very wide logo may lose its ends. For best results, use artwork that's roughly square to begin with, or switch to letter mode with your brand's initial. A quick look at the true-size preview will tell you instantly whether the crop kept what matters.
Do I still need an .ico file?
Almost certainly not. The .ico format is a relic from the Internet Explorer era; every modern browser happily accepts PNG favicons, which is what this tool produces. You'll find ancient tutorials insisting on favicon.ico, but that advice is two decades out of date. Ship the PNGs, reference them properly, and move on to more important things.
Is my uploaded logo kept anywhere?
No — and 'uploaded' isn't even the right word. Your image is read by your browser and drawn onto a canvas locally; it never travels over the network to any server. There is no account, no gallery, and no copy retained. Close the tab and the artwork is gone from here as completely as if you'd never opened the page.
Conclusion
The tab icon is tiny, but its absence shouts. Whether you bring a logo or just a letter, you leave with four crisp PNGs at the exact sizes browsers and phones request — drawn locally, downloaded in a minute, and ready to make your site look finished.