Your logo looks great on a billboard. It looks great on your homepage header. Then you open a browser tab and it becomes a grey smudge with a hint of colour. This is the single most common failure in favicon design: treating a 16 pixel square like a shrunken version of a full logo instead of a completely separate design problem.
This guide covers the exact sizes and formats browsers expect today, then walks through the design decisions that turn an unreadable blur into a mark people actually recognise in a crowded tab bar.
What a favicon actually is (and where it shows up)
A favicon (short for favourite icon) is the small square image that represents your website. It originally lived only in the browser tab at 16×16 pixels, but in 2026 the same icon set is pulled into a lot more places, often at very different sizes.
| Where it appears | Typical rendered size | Why it matters |
|---|---|---|
| Browser tab | 16×16 to 24×24 | Tab recognition when a user has 20 tabs open |
| Bookmarks bar and history | 16×16 | Often the only visual next to a truncated title |
| Google mobile search results | 16×16 displayed, 48px+ source | Brand signal next to your snippet, affects click-through |
| iOS home screen shortcut | 180×180 | Uses a separate Apple touch icon |
| Android / PWA install | 192×192 and 512×512 | Declared in the web app manifest |
| Slack, Discord, WhatsApp link previews | 16×16 to 64×64 | Shared links without an OG image fall back to the favicon |
So one asset, many contexts. That is exactly why a single 16×16 PNG uploaded through a theme option is no longer enough.
Favicon sizes: the exact numbers browsers expect
You do not need fourteen files. Modern browsers resolved most of the chaos, and the practical set in 2026 is small.
The minimum viable favicon set
| File | Size | Format | Purpose |
|---|---|---|---|
favicon.ico |
16×16 + 32×32 (+48×48) | ICO (multi-layer) | Universal fallback, root directory, crawlers and legacy browsers |
icon.svg |
Vector, 32×32 viewBox | SVG | Crisp at any zoom or DPI, supports dark mode |
apple-touch-icon.png |
180×180 | PNG, opaque background | iOS and iPadOS home screen |
icon-192.png |
192×192 | PNG | Android launcher, manifest |
icon-512.png |
512×512 | PNG | PWA splash screens, app stores, high-DPI |
Important detail for search: Google wants a favicon that is a multiple of 48 pixels square (48×48, 96×96, 144×144 and so on) and it must be at least 8×8. A lone 16×16 file can still be used, but a 48px or larger source gives Google a clean image to downscale for mobile results. Your ICO with a 48×48 layer, plus the SVG, covers this. Anyone digging further should read Favicon Generator: Create and Customize Favicons.
The HTML you actually need
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Four lines. The favicon.ico should also physically sit at your domain root, because some crawlers and aggregators request /favicon.ico directly without reading your HTML.
Which format should you use: ICO, PNG or SVG?
| Format | Strength | Weakness | Verdict |
|---|---|---|---|
| ICO | Holds several pixel sizes in one file, works everywhere | Raster only, awkward to edit | Keep it as the baseline fallback |
| PNG | Full control of every pixel, transparency | One file per size, blurs if scaled up | Required for Apple and Android icons |
| SVG | Sharp at any size, tiny file, dark mode capable | No manual pixel tuning, ignored by some legacy tools | Use it as the primary icon in modern browsers |
The honest answer to “PNG or SVG?” is both, plus an ICO. SVG is served first to modern browsers, ICO catches everything else, PNG handles mobile home screens. If you only have the budget for one decision, make it this: design the mark as vector, export to all three.
The dark mode trick with SVG
Chrome and Firefox render an SVG favicon with its internal CSS, so you can adapt the icon to the browser theme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.mark { fill: #101828; }
@media (prefers-color-scheme: dark) {
.mark { fill: #ffffff; }
}
</style>
<path class="mark" d="..."/>
</svg>This single technique fixes the most common complaint we hear: a dark navy monogram that disappears completely in a dark tab bar.
Why most favicons turn into an unreadable blur
Before the rules, the diagnosis. In our audits, a failing favicon almost always comes down to one of these six causes.
- The full logo was exported as-is. A horizontal logo with a symbol plus company name, squeezed into a square, gives you a 4px tall wordmark. Unreadable by definition.
- Strokes are too thin. A 2pt hairline in a brand guideline becomes a sub-pixel line at 16px. The browser antialiases it into grey mush.
- Too many elements. Three overlapping shapes and a gradient need roughly 40px of space to separate. At 16px they merge into one blob.
- Low contrast between mark and background. Light grey on white reads as an empty square in a tab bar that already has a light background.
- Wrong padding. Too much padding shrinks the mark to 9 or 10 usable pixels. Zero padding makes it collide visually with the tab edges and the neighbouring text.
- Bad downscaling. Exporting from a 2000px artboard straight to 16px lets the software average pixels instead of aligning edges to the pixel grid.
Notice that five out of six are design problems, not technical ones. A generator will produce correct files from a bad source image, and you will still have an unreadable favicon.
7 rules for a favicon that works at 16px
1. Design one element, not a logo
Pick a single component: the symbol, the first letter, an abstracted shape from the logo. Drop everything else. If your brand has no symbol, build a monogram: one letter, or two at most, inside a container shape. A favicon is a brand shortcut, not a brand summary.
2. Start at 16×16, then scale up
This is the rule that changes results the most. Open a 16×16 artboard with the pixel grid visible and build the mark there, snapped to whole pixels. Then rebuild it as vector at 32×32 and 512×512. Designing small and scaling up forces simplification. Designing big and scaling down produces blur.
3. Respect minimum stroke weight
As a working rule:
- At 16×16, no stroke or gap thinner than 2 pixels
- At 32×32, no stroke thinner than 3 pixels
- Counters (the hole in an “a” or “e”) need at least 2 pixels of clearance or they fill in
If your brand typeface is a thin sans, use a bolder weight of the same family for the favicon. Nobody will notice, and it will actually be legible.
4. Limit yourself to two colours and kill the gradients
Flat shapes survive downscaling. Gradients, drop shadows, inner glows and bevels average into a single dull tone in a 256 pixel area. Keep one brand colour plus one contrast colour, and check the mark in pure black and white too.
5. Use a container when the mark is fragile
A solid rounded square or circle filled with brand colour, with the glyph knocked out in white, is the most reliable favicon pattern in existence. Reasons:
- It guarantees contrast against light and dark tab bars
- It defines a clear outer silhouette, which is what the eye locks onto at small size
- It gives consistent optical weight next to competitors’ icons
6. Fill the frame, but keep 1 to 2 pixels of breathing room
At 16×16, aim for the mark to occupy roughly 14×14 pixels. Centre it optically, not mathematically: round shapes need to sit slightly larger than square ones to look the same size. For the 180×180 Apple touch icon, keep the artwork inside about 80 percent of the frame, because iOS clips corners and adds its own rounding.
7. Test in the real environment, not in your design tool
A favicon that looks fine zoomed to 400 percent in Figma can fail in a tab. Run these four checks:
- The tab test: load the site with 15 other tabs open, then look away and look back. Can you find your tab in under a second?
- The squint test: blur or squint at the 16px version. A strong silhouette survives, a weak one disappears.
- The dark mode test: switch your OS to dark and check both the tab bar and the bookmarks bar.
- The greyscale test: remove all colour. If the mark only works because of colour, it will fail in monochrome contexts.
Turning a full logo into a favicon: a repeatable process
- Isolate candidates. List every element of the logo that could stand alone: the symbol, the initial, a distinctive counter shape, a signature angle.
- Kill the wordmark. Unless your brand name is 1 to 3 characters, text is out. “BWD” can work as a monogram. “Branded Web Design” cannot.
- Crop hard. If the symbol is detailed, crop to its most recognisable fragment rather than reducing the whole thing. A zoomed detail keeps stroke weight; a full reduction destroys it.
- Redraw on the pixel grid. Rebuild the chosen element with whole-pixel coordinates at 16×16 and 32×32. Straighten near-diagonals to true 45 degrees where possible, since 45 degree edges antialias cleanly.
- Thicken and simplify. Increase stroke weight, merge shapes that nearly touch, remove any element smaller than 2 pixels.
- Add the container if contrast is weak. Test with and without.
- Export the set. SVG, multi-size ICO, 180px, 192px and 512px PNGs.
- Validate. Check every context, then hard refresh, because favicons are cached aggressively.
Good and bad favicon patterns at a glance
| Works at 16px | Fails at 16px |
|---|---|
| Single bold letter, knocked out of a solid shape | Full company name in any typeface |
| Flat geometric symbol, 2 colours | Illustrated mascot with facial details |
| Strong, distinctive outer silhouette | Thin line-art with fine internal detail |
| Solid colour that contrasts on white and dark | Multi-stop gradient or photographic texture |
| One concept, one focal point | Symbol plus tagline plus border plus shadow |
Troubleshooting: my favicon is not updating
You replaced the file and the old icon is still there. Work through this list in order:
- Browser cache. Favicons are among the most stubbornly cached assets. Open the icon URL directly (for example
yoursite.com/favicon.ico) and hard refresh that URL. - Add a version string.
href="/favicon.ico?v=3"forces a fresh fetch for returning visitors. - CDN or page cache. Purge your CDN and any WordPress caching plugin, in that order.
- Duplicate declarations. Themes, plugins and the WordPress Site Icon feature can all inject
<link rel="icon">tags. View source and remove the duplicates, keeping one clean set. - Wrong MIME type. An SVG served as
text/plainwill be ignored. Check the response headers. - Google search results lag. Google re-crawls favicons on its own schedule, so allow days to weeks. The file must be crawlable, not blocked by robots.txt, and on a stable URL.
- Blocked by an ad blocker or privacy extension. Test in a clean browser profile before assuming your code is broken.
Generators: useful, but not a design strategy
Tools like RealFaviconGenerator, favicon.io or Canva will happily produce every file and the markup in seconds, and they are worth using for the export step. What they cannot do is decide what to draw. The workflow that consistently produces good results is:
- Make the design decisions yourself, following the 7 rules above
- Produce a clean vector master at 32×32
- Feed that master into a generator for the file set and the HTML
- Test in real browsers and real dark mode
Garbage in, garbage out applies more to favicons than to almost any other asset, because there is nowhere for detail to hide.
Quick reference checklist
- Single element, no wordmark unless it is 1 to 3 characters
- Designed on a 16×16 pixel grid, then rebuilt as vector
- Minimum 2px strokes and gaps at 16px
- Two colours maximum, no gradients or shadows
- Legible in greyscale and in dark mode
- Files: multi-size ICO, SVG, 180px, 192px, 512px PNG
favicon.icopresent at the domain root- A source icon of at least 48×48 for Google search results
- One clean set of
<link>tags, no duplicates - Verified in a tab bar with 15 other tabs open
FAQ
What is the best favicon design?
The one people recognise fastest at 16 pixels. In practice that means a single flat element with a strong silhouette and high contrast, usually either a simplified brand symbol or one bold letter knocked out of a solid shape. Complexity, gradients and text are the three things that reliably ruin a favicon.
What size should a favicon be?
Design at 16×16 and 32×32, but deliver a set: a multi-size ICO containing 16, 32 and 48 pixel layers, an SVG, a 180×180 PNG for iOS, and 192×192 plus 512×512 PNGs for Android and PWA installs. For Google search results, supply a square icon that is a multiple of 48 pixels. A comparable breakdown sits on zendesk.com.
How do I create my own favicon?
Choose one element from your logo, redraw it on a 16×16 pixel grid with thick strokes and flat colour, rebuild it as vector, then export the full file set with a favicon generator. Upload the files, add the four <link> tags to your <head>, put favicon.ico at your domain root and clear all caches.
How can I turn an image into a favicon?
You can convert any PNG or JPG with a generator, but a photo or detailed illustration will not survive the reduction. Crop to the single most distinctive part of the image, boost contrast, remove background clutter, then convert. If the result fails the squint test, redraw the shape instead of converting the photo.
Should I use PNG or SVG for favicon?
Use SVG as the primary icon for modern browsers, because it stays sharp at any resolution and can respond to dark mode. Keep PNG for the Apple touch icon and manifest icons, where it is required, and keep an ICO as the universal fallback. It is not either/or.
Does a favicon affect SEO?
Not as a ranking factor, but it appears next to your title in Google mobile results, which influences click-through rate. A clear, on-brand favicon makes your snippet look established; a missing one leaves a generic placeholder globe. Treat it as a CTR and trust asset.
Can I use an emoji as a favicon?
Technically yes, and it renders surprisingly well because emoji are designed for small sizes. Strategically no, for any brand that wants to be taken seriously, because you have zero ownership of the mark and it will appear identically on thousands of other sites.
Need a favicon that actually reads in a tab?
Favicon design is usually the last five minutes of a web project, which is exactly why so many of them fail. At Branded Web Design we treat the 16 pixel mark as part of the identity system: simplified properly, exported in every format browsers and search engines expect, and tested in real contexts. If your current favicon is a blur, get in touch and we will fix it as part of your brand and website build.