Overview
Look at any crowded browser tab bar and the sites you recognise instantly are the ones with crisp little icons. The favicon does that identification work in tabs, bookmarks, history and phone home screens — an absurd amount of branding per pixel. Yet generating one properly means four different sizes, each rendered at its true dimensions, which is fiddly work by hand.
Two routes get you there here. Upload any image and the tool centre-crops it to a square, then renders all four sizes exactly. Or choose letter mode: one bold character on a solid background of your colours — a look that stays razor-legible at sixteen pixels and suits personal sites, side projects and prototypes that have no logo yet.
Why one size does not fit all
A favicon is the small icon browsers associate with a website, a convention dating back to 1999 when Internet Explorer looked for a file literally named favicon.ico at the domain root. Modern practice uses PNG files declared with link tags, and each platform asks for its own size: browsers want 16 and 32 pixels for tabs, Windows tiles like 48, and Apple devices want a 180-pixel touch icon for home-screen bookmarks.
The critical detail is that each size must be rendered at its true pixel dimensions. A 180-pixel image squeezed into a 16-pixel tab does not gracefully shrink — it turns to mush, because the browser throws away pixels indiscriminately. Generating every size natively keeps edges sharp where sharpness matters most.
Features
- Two starting points: upload any image, or letter mode with zero artwork.
- Smart centre-crop turns wide or tall pictures into clean squares.
- Four true sizes: 16, 32 and 48-pixel PNGs plus the 180-pixel Apple touch icon.
- Letter mode with your background and letter colours, legible at tab size.
- True-size previews show each icon at its actual rendered size first.
- Flexible downloads: all four at once, or individually as needed.
- Made on your machine — your artwork is never uploaded.
Benefits
- Look finished. A proper icon set is the difference between a project and a placeholder.
- No design skills needed. Letter mode makes a respectable mark in seconds.
- Sharp everywhere, from tab bar to phone home screen.
- Free for every site you own — generate as many sets as you like.
Who can use it
Indie hackers shipping side projects, bloggers finally fixing that blank tab icon, developers prototyping before the designer arrives, small businesses whose 'logo' is currently a screenshot, and students publishing portfolio sites. If your site shows a generic globe in the tab bar, this is your five-minute upgrade.
How to use
- Choose 'An image' and drop one in, or choose 'A letter'.
- For letter mode, type your character and pick background and letter colours.
- Check the true-size previews of all four icons.
- Download the full set at once, or grab sizes individually.
- Upload the files to your site root and reference them with link tags.
Frequently asked questions
My uploaded photo looks bad as a favicon — why?
Detail does not survive sixteen pixels. Busy photos, faces and gradients collapse into noise at tab size. Simple, high-contrast source images work best — or skip the photo entirely and use letter mode, which is designed to stay legible tiny.
Which files do I actually need on my server?
The classic set: 16, 32 and 48-pixel PNGs for browsers, plus the 180-pixel apple-touch-icon for iOS home screens. Reference them with link tags in your page head. That covers tabs, bookmarks, tiles and phone shortcuts — the full journey.
Why is my new favicon not showing up?
Caching, almost always. Browsers cache favicons aggressively and for a long time. Hard-refresh, clear the site data, or check in a private window. Some browsers take a restart to pick up a changed icon — the files are fine, the cache is stubborn.
Is a letter favicon unprofessional?
Quite the opposite for small sites — a clean letter mark looks deliberate, while a blurry shrunken logo looks accidental. Plenty of respected indie products run letter favicons for years. Upgrade to a designed mark when you have one; until then, the letter is the professional choice.
Does letter mode work with any character?
Letters, digits and most symbols render fine — pick the character people associate with your name. Emoji rendering varies by platform, so stick to plain characters for consistency across browsers.
Conclusion
Sixteen pixels is all it takes to look like you meant it. Upload, crop, download — or just pick a letter and a colour. Your tab bar will thank you.