A favicon is not a small version of your logo. It is a separate piece of design work that happens to be about the same brand, and treating it as a scaled-down export is why so many browser tabs are occupied by a small grey bruise.
The reason is arithmetic rather than taste. A favicon at 16x16 is 256 pixels of information in total. Your logo file, exported at 512x512, has 262,144. That is a factor of 1024. Knowing how to design a favicon is mostly knowing what to throw away, because you are not scaling a logo down, you are rebuilding it with a thousandth of the material.
Plenty of teams spend two weeks on brand guidelines and eleven minutes on the favicon, then wonder why nobody recognises their tab. The tab is the piece of brand a user sees fifty times a day. It deserves more than an export preset.
What follows is the process: the ladder you climb down from full logo to something legible, the stroke-weight number that decides most of it, the contrast problem that only shows up when someone switches to a dark theme, and how to test the result without deceiving yourself.
The short answer
Favicon design is subtraction. Start with your logomark, strip everything that cannot be described in about a dozen pixels, and keep going until what remains is a single recognisable shape.
The practical rules that do most of the work:
- Cut the wordmark. Letterforms at 16 pixels are around two pixels tall and unreadable.
- Nothing thinner than two pixels in the 16x16 frame. On a 512 pixel master that is 64 units.
- Two or three flat colours. Gradients, shadows and outlines all turn to mud.
- Fill the frame. Ignore your brand’s clear-space rule here, because padding makes an already tiny icon smaller.
- Give it a background shape, or a rim, so it stays visible on both a near-white and a near-black tab bar.
Then look at it at 16 pixels in a real browser tab, next to eight other tabs, before you sign it off. Most favicons fail because nobody ever did that.
16 by 16 is 256 pixels, and that is the whole problem
Sit with the number for a second. A 16x16 icon has 256 pixels. A single lowercase “e” in this paragraph, on a typical screen, is drawn with more pixels than your entire favicon.
Modern displays complicate this in a way that helps less than you hope. On a 2x display the browser paints a 16 CSS pixel slot using 32 device pixels, so a 32x32 image looks sharper. Good. But the icon still occupies the same physical area on the glass, about four millimetres square on a laptop, and the eye at normal viewing distance resolves detail at roughly the level of the CSS pixel. Higher density buys you smoother edges. It does not buy you room for more shapes.
So the constraint is set by the 16x16 grid whether the file you ship is 32, 48 or vector. This catches people out with SVG: a vector favicon is mathematically perfect at any size and still illegible at 16, because legibility is about how many distinct shapes a viewer can separate, not about edge precision. Build at 512 for comfort, keep a 16x16 preview open the whole time, and treat the small one as the source of truth.
The reduction ladder
Every brand starts somewhere on this ladder and needs to climb down until the icon reads. There are four rungs.
Rung one is the full lockup: mark plus wordmark, sometimes plus a tagline. This never works. Not “rarely”. Never. At 16 pixels the wordmark is a smear of grey and the mark is squeezed into a third of the frame.
Rung two is the logomark alone, the symbol with the type removed. This works when the symbol is a simple geometric shape with a strong silhouette. If your mark is a detailed illustration, a crest, or anything with more than about four distinct elements, it does not survive rung two.
Climb down again and you reach a single letter or monogram, usually the first letter of the name, set in a heavy weight and filling most of the frame. That is rung three, it is where a large share of well-known sites have ended up, and there is no shame in it. One letter is roughly the most information a 16x16 frame can carry while staying identifiable.
Rung four is an abstract shape or silhouette: a dot, a chevron, a filled square with a notch, a simplified outline of the object your product is about. You go here when the letter is too generic (three of the user’s open tabs already start with S) or when your mark reduces well to a pure form.
Most brands should land on rung two or three. If you are a well-funded company with a distinctive geometric symbol, rung two. If you are a name-led product without a strong symbol, rung three, and stop agonising about it.
Two letters is the trap. “AB” at 16 pixels gives each glyph about seven pixels of width, and seven pixels is not enough to render a letterform that stays distinguishable from its neighbour. If your brand is two initials, pick one.
Stroke weight decides more than anything else
Here is the single number to carry away: nothing in the icon should be thinner than two pixels in the 16x16 frame.
Do the conversion once. Your master is 512x512. The scale factor to 16 is 512 divided by 16, which is 32. So one pixel at 16 equals 32 units at 512, and the two-pixel minimum equals 64 units. Sixty-four. If your logo’s stroke is 6 units at 512, which is a completely normal weight for a logo designed to be printed, it renders at 6 divided by 32, which is 0.19 pixels. A fifth of a pixel. The rasteriser cannot draw a fifth of a pixel, so it draws a faint grey line at about 19% opacity, and at 16 pixels that reads as nothing.
The same rule applies to negative space. A counter (the enclosed hole in an “a”, “o” or “e”, or the gap inside a ring) needs at least two pixels of clearance or it fills in with anti-aliasing and your ring becomes a dot. This is why a thin circular monogram frame is such a common failure: the ring itself is thin, the gap between ring and letter is thin, and both collapse at once.
There is a second-order effect worth knowing. Strokes render cleanest when they are an even number of pixels and land on integer boundaries. A 2-pixel stroke centred on a pixel edge is crisp. The same stroke centred on a pixel midpoint splits across two rows and renders as two rows of 50% grey, which looks like a 4-pixel blur. If your icon looks soft for no obvious reason, this is usually why, and the fix is nudging the geometry by half a unit rather than redrawing anything.
What dies at 16 pixels
| Design element | Survives at 16px? | What to do instead |
|---|---|---|
| Wordmark or any text | No | Remove it entirely, or reduce to one letter at heavy weight |
| Strokes under 2px (64 units at 512) | No | Thicken to 2px minimum, or convert stroke to filled shape |
| Gradients | Barely | Pick the midpoint colour and go flat |
| Drop shadows | No | Delete. There is no room for a shadow and the mark |
| Outer keyline around the whole mark | Rarely | Only if the keyline is 2px and serves as dark-mode contrast |
| Thin serifs and hairline terminals | No | Use a heavy sans or grotesque, or a custom drawn letterform |
| More than 3 flat colours | No | Two colours plus a background. Three is the ceiling |
| Fine internal detail (windows, teeth, feathers) | No | Replace with the silhouette that contains them |
| Small corner radius (under about 2px) | Invisible | Either go square or use a radius you can actually see |
| Transparency | Risky | Add an opaque background shape unless you have tested both themes |
| Diagonal hairlines | No | Diagonals need more weight than horizontals to read the same |
The diagonal point is under-appreciated. A horizontal 2-pixel line lands on whole pixel rows and renders solid. The same 2-pixel line at 45 degrees is spread across a staircase of partially covered pixels, so it reads lighter and softer. If your mark has both horizontals and diagonals, the diagonals usually need to be roughly a pixel heavier to look like they match.
Your icon has two backgrounds, not one
This is where I’d push back hardest on standard logo practice. Brand guidelines usually specify a primary colour on white. A favicon does not live on white. It lives on whatever the browser’s tab strip happens to be, which changes with the operating system theme, the browser, and whether the tab is active.
Take a dark navy mark, say #102A43, with a transparent background. On a light tab bar it looks excellent. Now the user switches to dark mode, and the tab strip becomes a near-black around #202124. Run the WCAG relative-luminance calculation on those two colours and you get luminance values of roughly 0.0217 for the navy and 0.0152 for the tab bar. The contrast ratio is (0.0217 + 0.05) divided by (0.0152 + 0.05), which is 1.1 to 1.
One-point-one to one. That is not “low contrast”. That is invisible. Your icon is a black rectangle on a black rectangle, and every dark-mode user sees an empty tab.
Now put the same navy mark on a white filled square. White against that tab bar gives (1.0 + 0.05) divided by (0.0152 + 0.05), which is 16.1 to 1, and the navy against the white square gives 14.6 to 1. The mark reads, and the icon reads, on both themes, with one file and no browser feature required.
| Approach | Works on light bar | Works on dark bar | Requires browser support |
|---|---|---|---|
| Transparent background, dark mark | Yes | No | None |
| Transparent background, light mark | No | Yes | None |
| Filled background shape | Yes | Yes | None |
| Dark mark with 2px light rim | Yes | Mostly | None |
SVG with prefers-color-scheme |
Yes | Yes | Chrome, Edge, Firefox; Safari inconsistent |
The SVG route is genuinely elegant and I use it, but it is the only row in that table with a support caveat, so it belongs on top of a fallback rather than instead of one. The technique, including the detail that the media query resolves against the browser’s colour scheme rather than the page’s, is covered in SVG favicons and dark mode.
A caveat on the numbers above. WCAG contrast ratios were written for text legibility, not for icon recognition, and there is no published threshold that says “a favicon needs 3:1”. I am using the formula as a measuring stick because it is objective and easy to compute, not because 4.5:1 is a rule for icons. Treat anything under about 3:1 against either tab colour as a problem worth fixing, and trust your eyes over the arithmetic.
Padding, and why your clear-space rule is wrong here
Brand guidelines love clear space. Keep a margin equal to the height of the “x” around the mark, that sort of thing. It exists so your logo does not get crowded on a poster.
At 16 pixels, honour that rule and you throw away a third of your canvas. A mark occupying the central 10x10 of a 16x16 frame has 100 pixels to work with instead of 256. You have made a hard problem 60% harder for no benefit, because there is nothing to be crowded by. The tab bar is not a poster.
Bleed to the edges. One pixel of padding at 16, sometimes zero. Circular marks can touch all four sides at their widest points, and square background shapes should fill the frame completely.
The exception is the maskable icon in a web app manifest, where Android crops your artwork to a platform shape and you need generous margin. Mixing the two up is common: people apply maskable safe-zone padding to their 16x16 favicon and end up with a tiny mark floating in space. The ToolFiddle favicon generator keeps those two crops separate for exactly this reason.
Colour, and standing out in a crowded tab strip
Once a user has more than about eight tabs open, browsers collapse the tab down until only the favicon is visible. Your icon is now competing directly with every other icon in that strip, and the thing that gets a click is not beauty. It is difference.
Look at the tab strip of your actual target user. If you are building a developer tool, they have a black GitHub cat, a mostly-white document editor, a blue-and-white cloud console, a red-and-white video site, and three tabs of your competitors’ documentation. Generic blue is the most common favicon colour on the web by a wide margin, and picking it puts you into a crowd.
Two practical moves. First, pick a hue with a distinctive position: an orange, a deep green, a magenta. Second, commit to one dominant colour that fills most of the frame, because at 16 pixels an icon reads as a colour blob first and a shape second. That colour blob is doing more identification work than the shape inside it.
If you are pulling colours from existing brand artwork rather than a defined palette, the Palette Extractor will give you the actual dominant hex values from an image, and the Color Picker is useful for testing a shade lighter or darker until the mark separates from its background.
One honest uncertainty: I do not have solid evidence about how much favicon distinctiveness affects tab-switching behaviour. It seems obviously true that a recognisable icon is easier to find, and I design that way, but I am not going to hand you a percentage.
Worked example: Northbeam Surveying, from 512 to 16
Say Dana runs a small land surveying firm called Northbeam. The logo is a compass rose with sixteen points, a thin circular frame, and the word NORTHBEAM set in a light serif underneath. It is a good logo at business-card size.
At 512x512, the compass points are 8 units wide at the base and taper to nothing. The circular frame is 5 units. The serif type has hairlines around 4 units.
Scale factor to 16 is 32. So:
- Compass point base: 8 / 32 = 0.25 pixels
- Circular frame: 5 / 32 = 0.16 pixels
- Serif hairline: 4 / 32 = 0.125 pixels
Everything is well under a fifth of a pixel. Rendered at 16, the whole icon is a faint grey circle. Dana’s first instinct was to bump the export to 32x32 and call it fixed, which doubles those numbers to 0.5, 0.31 and 0.25 pixels. Still nothing.
So Dana climbs the ladder. Rung two, logomark only: the compass rose alone gets 16 points across 16 pixels of width, one point per pixel, so the points merge into a solid disc. Rung two fails on element count rather than stroke weight.
Rung four, abstract: reduce the compass to its single north point, a filled triangle. Now the maths works. A triangle 10 pixels wide at the base and 12 pixels tall at 16x16 is a solid, unambiguous shape. Back on the 512 master, that is 320 units wide and 384 tall.
Dana fills the frame with the brand’s deep green, #0B5E43, and puts the north point in off-white at #F5F3EE. The green reads against a light tab bar and against a dark one, because it is a mid-tone rather than a near-black, and the off-white triangle inside it carries roughly 8:1 against the green.
Final check at 16: a green square with a pale arrow pointing up. It does not look like the compass rose. It is recognisably Northbeam to anyone who has seen the full logo, and it survives at the only size that matters. That trade is the entire job.
If you want to run the same reduction without a design tool open, the ToolFiddle favicon generator will render your candidate at 16, 32 and 48 side by side so you can see the failure before you ship it, and produce the multi-resolution .ico and PNG set from whichever version wins. It runs in the browser, so unreleased brand artwork never gets uploaded anywhere.
How to test it without lying to yourself
The commonest mistake is judging a favicon at 400% zoom in a design tool, where it looks fine because you are seeing 64 pixels of screen for every icon pixel.
- Export the candidate at exactly 16x16 and 32x32. Use nearest-neighbour or a sharp resample rather than a smooth bicubic downsample, which softens exactly the edges you need. Image Resizer is fine for this if you are working from a raster.
- Build the
.icoand drop the files into a local test page. Any static server will do. - Open the page in a real browser tab. Not a preview panel. A tab.
- Open eight other tabs of sites your users actually use, so the tab strip narrows and your icon sits among competitors.
- Switch the operating system to dark mode and look again. Then switch back.
- Step back from the screen by about a metre. If you cannot tell which tab is yours, it has failed.
- Blur test: apply a 1-pixel Gaussian blur to the 16x16 export. A strong icon still reads as its silhouette. A weak one becomes a blob.
- Show it to someone who knows the brand but has not seen your favicon work, and ask them what it is. Do not prompt them.
- Check it on a phone. Add the site to a home screen and look at the icon among the user’s apps, where it sits at a much larger size and different rules apply.
Step nine matters because the same artwork gets used at 180 pixels on iOS, where all the detail you removed would have been fine. Some teams ship a simplified 16 and 32 inside the .ico and a richer version at 180 and 512, which is a legitimate approach and one of the arguments for shipping more than one icon file rather than a single SVG for everything.
The mistakes that keep recurring
Designing at 512 and never rendering at 16 until launch day. Everything else on this list is downstream of that one.
Trusting the design tool’s on-canvas preview. Most tools render small artboards with their own scaling and hinting, which flatters the result. Export the actual PNG and open it in a viewer at 100%.
Downsampling the 16 from the 512 with a smooth filter. A bicubic reduction of a detailed mark produces a soft grey approximation of it, which is not the same as a redrawn 16-pixel icon. The multi-resolution .ico exists precisely so you can hand-tune the small frames. PNG to ICO will pack separate hand-made 16, 32 and 48 exports into one file.
Half-pixel geometry, covered above, and worth checking whenever an icon looks soft rather than wrong.
Shipping a transparent PNG because the design system says logos are always transparent. Test both tab themes before accepting that.
Letting the logo committee decide. The people who approved the full lockup will want it preserved, and a favicon negotiated by consensus ends up an unreadable compromise. Show them the 16-pixel render, at 16 pixels, on a screen. The argument usually ends there.
Forgetting the icon exists after a rebrand. The favicon is the last asset anyone updates and the one users see most often.
Frequently asked questions
What size should I design a favicon at?
Design at 512x512 so you have room to work, but judge every decision at 16x16. Export both and look at the small one constantly. A mark that reads at 512 and fails at 16 is a failed favicon, because 16 is the size almost every person actually sees in a browser tab.
Can I just use my logo as a favicon?
Only if your logo is already a simple mark with two or three flat colours and no type. A full lockup with a wordmark never survives, because letterforms at 16 pixels are roughly two pixels tall. Take the logomark on its own, or reduce further to a single letter or a silhouette.
What is the minimum stroke width for a favicon?
Two pixels in the 16x16 frame. A one-pixel stroke lands on a fractional boundary after scaling and anti-aliases into a soft grey line that reads as smudge rather than shape. If you are working on a 512 pixel master, two pixels at 16 means 64 units at 512, which is thicker than most designers expect.
Should a favicon have a transparent background?
Usually not. A transparent favicon inherits the tab bar colour, so a dark mark disappears against a dark theme and a light mark disappears against a light one. A filled background shape in a colour that contrasts with both near-white and near-black is the reliable choice. Apple touch icons must be opaque regardless.
How do I stop my favicon disappearing in dark mode?
Three options, in order of reliability. Put the mark on a filled background shape so it carries its own contrast. Add a light rim or keyline around a dark mark. Or ship an SVG favicon with a prefers-color-scheme media query so the fill flips. The first works everywhere and needs no browser support.
Is a letter monogram a good favicon?
It is often the best available option for a name-led brand, and it is what many well-known sites use. One letter, set heavy, filling most of the frame. Two letters rarely work at 16 pixels because each glyph gets about seven pixels of width. Set the type, then convert it to outlines and thicken by eye.
The practical upshot
Build at 512, judge at 16, and expect to throw away more of your logo than feels comfortable. The two numbers to remember are the 2-pixel minimum stroke (64 units on a 512 master) and the two background colours your icon has to survive, near-white and near-black.
If your mark cannot climb down to a single shape or a single letter, that is information about the mark rather than a failure of the process. Plenty of strong brands use a favicon that shares only a colour and a general feeling with their primary logo, and it works fine, because recognition at that size runs on colour and silhouette.
Get it in front of your own eyes in a real tab strip before you commit. Ten minutes of that is worth more than a week of theory.