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.