Design for 16×16, not 512×512
The most common mistake is designing a favicon that looks great at 512×512 but becomes an unrecognisable blob at 16×16 — the size shown in browser tabs. After generating, zoom in on the 32px preview in the tool and squint at it. If you cannot tell what it is at that size, simplify. Single letter, single emoji, or a very bold simple shape are the only things that work at favicon sizes.
High contrast between icon and background is essential
At 16px, subtlety disappears. A light grey icon on a white background is invisible. A medium-blue icon on a navy background is unreadable. Use a background colour that contrasts sharply with the icon. The best combinations: white icon on a strong brand colour, or a dark icon on a light brand colour. Test by viewing the 32px preview on both a white and dark browser chrome.
Emoji choice psychology
Emoji favicons communicate category and personality instantly. Tools and utilities tend to use ⚡, 🔧, 🛠, or ⚙️. Creative tools use 🎨, ✏️, or 🖌. Security tools use 🔐 or 🛡. Finance uses 💰 or 📊. The emoji should relate to what the site does, not just look cool. A random sparkles emoji ✨ for a database tool creates confusing expectations.
Use SVG format as the primary modern favicon
Modern browsers (Chrome 80+, Firefox 41+, Safari 9+) support SVG favicons, which scale perfectly to any resolution. The <link rel="icon" type="image/svg+xml" href="/favicon.svg"> tag in the HTML snippet is the most future-proof favicon approach. Always include PNG fallbacks for older browsers and the Apple touch icon for iOS, but the SVG should be your primary icon.
Dark mode-aware favicons
SVG favicons can use CSS media queries to adapt to dark mode: @media (prefers-color-scheme: dark) { ... }. This lets your favicon show a dark background in dark mode browsers and a light background in light mode, automatically matching the user's system preference. Export the SVG from the tool and add the media query manually for this advanced effect.