How to preview your favicon
- Drop your existing favicon — PNG, ICO, or SVG — into the upload area.
- The tool renders the icon in five contexts: light browser tab, dark browser tab, iOS home screen, Android home screen, and Windows Start tile.
- Compare against your brand guidelines. Common issues: poor contrast in dark mode, illegible at 16×16, awkward bleed under the iOS rounded mask.
What to look for
- Browser tabs: the icon renders at 16–20 px. Strokes thinner than 2 px usually disappear.
- Dark mode tabs: a dark logo on a transparent background can vanish. Bake a background tile in or supply a dark-mode SVG with
prefers-color-scheme. - iOS home screen: Apple applies a 22% rounded mask. Don't place critical artwork in the corners.
- Android launcher: the launcher may apply a circle, a teardrop, or a squircle mask. Keep the mark inside a 66% safe zone.
- Windows tile: 100% colour fill. Test against a dark and a coloured Start background.
Why preview matters
Designers often build favicons at 256×256 in a vector tool and never check the output at 16×16. The downscale is brutal. By previewing at the actual sizes browsers and launchers use, you catch readability problems before they ship.
FAQ
Does this upload my favicon anywhere? No. Files are read with URL.createObjectURL and rendered locally.
Why does my SVG look different here vs. in production? Browsers rasterise SVGs at the requested size. If you want pixel-perfect control, generate a PNG at each target size with the Favicon from Image tool.
Can I preview a remote URL? Not yet — drop a local file for now.