The sizes that are actually needed
Far fewer than most generators produce. A 32x32 PNG covers browser tabs, a 180x180 apple-touch-icon covers iOS home screens, and a 512x512 covers Android and the web app manifest. An SVG favicon, where supported, covers everything else and scales perfectly.
The old multi-size .ico mattered for Internet Explorer and is now largely ceremonial — though it is still what a browser requests from the site root if you declare nothing at all.
Designing for sixteen pixels
A favicon is often shown at 16 CSS pixels. A detailed logo becomes an unreadable smudge at that size, which is why almost every recognisable favicon is a single letter or one bold shape.
Test it at actual size before committing. Something that looks good in a design tool at 512 pixels routinely disappears in a tab.
Dark mode
Tab bars are dark in dark mode, and a dark logo vanishes into one. An SVG favicon can respond to prefers-color-scheme; a PNG cannot, so it needs to work on both backgrounds — usually meaning a mid-tone or an outline.
Frequently asked questions
Which sizes do I really need?
32x32 for tabs, 180x180 for iOS, 512x512 for Android and the manifest. An SVG covers the rest where it is supported.
Is a .ico file still necessary?
Largely ceremonial now, but a browser still requests /favicon.ico from the site root if nothing is declared, so it does no harm.
My favicon disappears in dark mode. Why?
A dark logo on a dark tab bar. An SVG favicon can respond to the colour scheme; a PNG has to work on both, which usually means a mid-tone or an outline.
Something wrong with this tool, or an idea for it? Tell us