About the Favicon Preview
Favicons are designed at 512 pixels and seen at 16. Detail that looks crisp in a design tool turns into mush in a tab, and a dark icon can vanish against a dark-themed tab strip. This preview puts your file in the contexts that actually matter before you ship it.
How to use the Favicon Preview
- Upload your favicon — PNG, SVG or ICO.
- Set a page title so the tab looks realistic.
- Toggle between light and dark tab themes.
- Compare the icon at every common rendered size.
Why use this tool?
Real tab widths
Wide, medium, narrow and pinned tab widths, because a crowded window shrinks tabs dramatically.
Light and dark themes
Catch icons that disappear against a dark tab strip before your users do.
Every rendered size
16, 32, 48, 64, 128 and 180 px side by side, plus bookmark bar and home-screen app icon mock-ups.
Frequently asked questions
What sizes should I ship?
A 32×32 PNG covers most desktop use, a 180×180 apple-touch-icon covers iOS, and a 512×512 PNG in your web app manifest covers Android. One SVG favicon plus those PNGs is a solid modern set.
Should a favicon have transparency?
Usually yes, so it sits well on light and dark tab strips. If your mark is dark, add a coloured rounded square behind it instead of relying on transparency.
Why isn't my new favicon showing?
Browsers cache favicons aggressively. Hard-reload, or open /favicon.ico directly and refresh it, then reload the page.