None of this needs a designer — it's a handful of decisions about what to keep and what to drop. Prepare the source with these in mind, then let the generator produce the sizes.
Use the mark, not the wordmark
The single most common mistake is feeding in the full horizontal logo — symbol plus company name. Shrunk to 16 px, the text becomes an illegible smear. Crop to just the symbol, monogram or first letter. If your brand has no symbol, a single bold initial on a coloured tile reads far better than three tiny words.
One idea, bold shapes
Think of the favicon as a silhouette you'd recognise across a room. Fine detail, thin outlines, drop shadows and subtle gradients all collapse at tab size. Simplify to the strongest shape and one or two flat colours. If you can still tell what it is when you blur it, it will survive 16 px.
Thicken the strokes
Lines that look elegant at full size can thin out to a single pixel — or vanish — when scaled down. If your mark is line-based, use a heavier weight for the favicon version than you'd use on the website. It's normal to keep a slightly different, chunkier variant just for the icon.
Give it a background
A transparent logo disappears the moment the tab colour matches your ink — a dark mark on a dark tab strip, for example. Two fixes, both built into this tool: fill a solid background colour behind the mark, or add a corner radius to sit it on a rounded tile. A confident coloured square also makes your tab easier to spot among twenty others.
Keep a safe margin
Don't run the artwork edge to edge. Leave a little breathing room — and if you'll ship a maskable icon for Android, that margin is mandatory: launchers crop the icon into a circle or squircle, so keep the important part inside the central ~80% (a 10% margin on each side). The tool's maskable safe-zone option shows you the crop boundary.
If your logo is a vector, keep it a vector
When you have an SVG source, use it — an SVG favicon stays crisp at every density and is the only format that can adapt to dark mode. Just simplify it for icon duty: strip fine detail, flatten effects, and make sure the shapes still read small. You'll still export a PNG/ICO alongside it for browsers and Google Search that ignore SVG (see the formats reference).
Test at 16 px before you commit
Judging a favicon at 512 px tells you nothing. As you adjust the source, watch the live tab preview here at actual size — that's the only view that matters. Try it against both a light and a dark tab bar. If it's still clearly your brand at 16 px in both, you're done.
Quick checklist
- Symbol or single letter — not the full wordmark.
- One idea, bold flat shapes, one or two colours.
- Strokes thick enough to survive scaling.
- A solid or rounded background so it never vanishes.
- A safe margin (mandatory if maskable).
- Checked at 16 px on light and dark.
Next: generate the files · sizes & formats · dark-mode & maskable details