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 lets a visitor find your page again among forty open tabs. It is also a quietly fiddly asset to produce, because browsers do not want one icon — they want a family of them, at several exact sizes, and a phone wants yet another for its home screen. Making those by hand in an image editor means four separate exports, four chances to mistype a dimension.
This generator collapses the errand into one step. Give 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 and use letter mode: one character, two colours, and a clean, legible mark that looks deliberate at every size — often the smarter choice, because at sixteen pixels a detailed logo turns to soup anyway.
What is a favicon, exactly?
The name is a fossil from the early web — "favourite icon", from the days when bookmarks were called favourites. Modern browsers show the icon in tabs, pinned sites, search results on phones, and the tile a user saves to their home screen. Each of those places asks for a different size so the picture stays crisp on everything from a dense laptop display to a large phone icon.
A missing favicon is not fatal, but it is 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 a great deal when your reader's attention is split across a crowded tab bar.
Features
- Two honest starting points: upload artwork if you have it, or build a letter mark if you do not — both produce the same complete set.
- The four sizes that matter: 16 × 16 for tabs, 32 × 32 for sharper displays, 48 × 48 for shortcuts, and 180 × 180 for Apple touch icons.
- Centre-crop, never stretch: non-square images are trimmed from the middle, so logos and faces keep their proportions.
- True-size previews: each icon is displayed at exactly the pixels it will ship at, over a chequered background so transparency is easy to judge.
- Individual or all-at-once downloads: grab a single size or fetch the whole set with one button; the 180-pixel file is already named apple-touch-icon.png.
- Live letter mode: type, pick two colours, and the set redraws as you work — no generate button to hunt for.
- Nothing uploaded: the icons are drawn on a canvas in your browser; your logo never visits a server, which matters for brands that have not launched yet.
Benefits
- A finished look, fast: the difference between a template and a real site is often this one small file, delivered in under a minute.
- No editor gymnastics: you never open a graphics program, set a canvas size, or export four times by hand.
- Legibility by design: letter mode forces the discipline that tiny icons need — one bold shape, two colours, no detail to lose.
- Private for unreleased work: a stealth project's logo is not sitting in some conversion site's upload folder.
- Free with no strings: no account, no watermark stamped corner-to-corner, no paid tier holding the big size hostage.
Who can use it
Anyone putting a site into the world: a shopkeeper launching a first store, a developer finishing a client build at midnight, a blogger whose theme keeps nagging about a missing icon, or a founder who needs a respectable placeholder before the real brand work lands. If you have ever searched "what size is a favicon", this page exists so you never have to again.
How to use
- Choose your starting point: "An image" or "A letter".
- For an image, drop the file onto the panel or click to browse; for a letter, type it and pick background and letter colours.
- Look at the previews — especially the 16-pixel one — and adjust until the smallest size still reads clearly.
- Download the sizes you need individually, or press "Download all four icons".
- Put the files in your site's root folder and link them in your page head: the small ones as icon, the 180-pixel file as apple-touch-icon.
- Hard-refresh your site and enjoy your page finally having a face in the tab bar.
Frequently asked questions
Why is there no .ico file?
The classic .ico container is a legacy format from older browsers. Every current browser happily accepts PNG favicons linked in the page head, so the four PNGs from this page cover real-world use. If a very old system specifically demands .ico, a desktop icon editor can wrap these PNGs for you.
What image makes the best source?
Something bold and simple: a logo mark, an initial, a single shape with strong contrast. Fine lines, photographs of groups and detailed illustrations all dissolve at 16 pixels. Whatever you upload, judge it by the smallest preview, not the biggest.
My image is not square. What happens?
It is cropped to a square from the centre before scaling, so nothing is stretched out of shape. If the important part of your artwork sits at an edge, crop it yourself first so the centre of the file is the centre of attention.
Which sizes do I actually need?
Realistically, all four. The 16 and 32 cover browser tabs and bookmarks, 48 appears in Windows shortcuts and some search displays, and the 180-pixel icon is what iPhones and iPads use when someone saves your site to their home screen. The set is small enough that there is no reason to skip any of them.
How do I add the icons to my site?
Upload the files to your site, then add link tags in your HTML head pointing at them — one with rel="icon" for each PNG size and one with rel="apple-touch-icon" for the 180-pixel file. Most site builders and WordPress themes also have a "site icon" setting that accepts the 180-pixel (or larger) PNG directly.
Can I use these icons commercially?
Yes — what you generate from your own artwork or letter is yours to use however you like, commercially or otherwise. Just make sure any logo you upload is artwork you have the rights to use.
Conclusion
A favicon is sixteen pixels of first impression, and it takes about a minute to stop neglecting it. Start from a picture or a single letter, trust the smallest preview, and download a set that makes your site look like somebody finished it — because somebody just did.