The 16-pixel first impression
Favicons are the smallest branding surface you own — 16×16 pixels in a browser tab — and one of the most visible. Users identify your site among 30 open tabs by that tiny square. A missing or blurry favicon quietly signals "unfinished". The good news: getting it right takes about two minutes.
Which sizes do you actually need in 2026?
- 16×16 and 32×32 — browser tabs and bookmarks (inside the .ico file)
- 48×48 — Windows taskbar shortcuts (inside the .ico file)
- 180×180 — Apple touch icon for iOS home screen
- 192×192 and 512×512 — Android / PWA manifest icons
- SVG (optional but nice) — infinitely sharp in modern browsers with one tiny file
The classic favicon.ico is actually a container holding 16, 32, and 48px versions — browsers pick the right one. Our Favicon Generator builds the proper multi-size ICO plus all the PNGs from a single source image.
Start from the right source image
This is where most favicons fail. Don't shrink your full detailed logo — at 16px it becomes mud. Instead:
- Use a simplified mark: just the icon part of your logo, or even a single letter on a brand-colour background
- Start from a 512×512 or larger square PNG with the mark centred and padded (keep ~15% margin so it doesn't touch the edges)
- Design at small size mentally: bold shapes, high contrast, no thin lines or small text
Test at 16px early and often — if it's not readable there, simplify further.
Dark mode tabs: the gotcha
Browser chrome now follows system dark mode, so a dark favicon on a dark tab background vanishes. Two fixes: add a subtle light background or rounded square behind your mark, or provide a prefers-color-scheme-aware SVG favicon. At minimum, preview your favicon against both light and dark tab bars before shipping.
Generate yours in one go
Upload your source image to our Favicon Generator — it produces the multi-size ICO, all PNG sizes, and a live preview at real tab sizes. Download individually or grab everything as a ZIP, drop the files in your site root, and add the link tags. Two minutes, done properly.
Frequently Asked Questions
- Is ICO still necessary, or is PNG enough?
- ICO is still the safest default — every browser supports it, including older ones, and it bundles multiple sizes in one request. Serve PNG sizes alongside for mobile/PWA. Belt and suspenders, negligible cost.
- Why does my favicon look blurry?
- Almost always one of two causes: you upscaled a small source image (start from 512px+), or the browser is stretching your 16px icon to 32px on a retina display (ship the multi-size ICO so it picks correctly).
- How do I add the favicon to my site?
- Place
favicon.icoin your site root (browsers check there automatically) and add<link rel="icon">tags for the PNG sizes plusapple-touch-icon. If you're on Next.js, theapp/icon.pngconvention handles most of this for you.