The favicon is 16×16 pixels of branding that appears in browser tabs, bookmark lists, browser history, home-screen shortcuts and search results. Sites without one get a generic blank page icon — a small but real trust signal you're leaving on the table.
Here's how to go from a logo file to a complete, correctly wired favicon set in minutes — entirely in your browser.
What browsers actually need (2026 edition)
The favicon ecosystem is famously messy, but in practice one file plus a few PNGs covers everything:
| File | Size(s) | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 packed in one file | Legacy browsers, some crawlers, defaults |
favicon-32.png | 32×32 | Standard tab icon (modern browsers) |
favicon-16.png | 16×16 | Low-DPI tabs |
apple-touch-icon.png | 180×180 | iOS home-screen shortcuts |
android-chrome-192/512.png | 192, 512 | Android / PWA install prompts |
The .ico format is the only multi-resolution container — and the one part that's genuinely annoying to produce by hand, since image editors don't save it natively.
Step by step
1. Prepare the source image
Start with the largest, cleanest version of your logo: square, at least 512×512px, ideally with a transparent background (PNG). Complex logos need simplification — at 16px, fine details vanish; think shapes and contrast, not lines and text.
2. Open the Favicon Generator
Drop your image into the Favicon Generator. It renders every required size from your source and packs the classic multi-resolution .ico automatically.
3. Check the small sizes
Look at the 16×16 preview specifically. If it's mush, simplify: remove thin strokes, increase shape contrast, or crop tighter around the symbol part of the logo (drop the wordmark — text is unreadable at that size anyway).
4. Download the set
You get the .ico plus the PNG sizes. Upload them to your site's root directory (where index.html lives) so /favicon.ico resolves — browsers request it there by default even with no HTML tag.
5. Wire up the HTML
Add these lines inside <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
If you already had a favicon, append ?v=2 to the URLs — browsers cache favicons aggressively.
Design tips for 16 pixels
- One shape. The best favicons are a single recognizable glyph: a letter in a rounded square, a simplified mark, a dot pattern.
- High contrast beats detail. Test against both light and dark browser themes — white-on-white is the classic failure.
- Use your brand color as background with the symbol knocked out in white. Color fills the tiny canvas; outlines dissolve.
- Round the corners yourself only if your brand is the shape — browsers already add their own rounding on some platforms.
Building an ICO by hand from PNG/JPG
Already have perfectly crafted size-specific PNGs? The PNG to ICO and JPG to ICO converters pack any image into a proper multi-resolution .ico with your chosen sizes (16, 32, 48, 64, 128, 256) — useful when a framework or a Windows application icon needs a specific size set.
FAQ
Do I still need favicon.ico in 2026?
Modern browsers are happy with PNG links, but the .ico catches the long tail: older crawlers, enterprise browsers, and the automatic /favicon.ico request. It costs nothing to include.
Are my logo files uploaded anywhere?
No. Resizing, PNG encoding and ICO packing all happen in your browser. Your logo is often your most sensitive brand asset — there's no reason to hand it to a random converter site.
Why isn't my new favicon showing up?
Browser cache. Hard-refresh, or visit /favicon.ico directly with a cache-busting query string, or test in a private window.
What source size should I start from?
512×512 or 1024×1024 square. Downscaling from large is clean; upscaling a 64px logo to 180px for Apple Touch will look blurry.
Generate your complete set in the Favicon Generator — a single logo file in, the full browser-ready set out.