Favicon Preview
Preview your favicon at real size in light and dark browser tabs, a search result and a phone home screen, then copy the link tags.
Drop your icon here, or click to browse
PNG, SVG, ICO, JPG or WebP. Nothing is uploaded — it never leaves your device.
Showing the built-in sample icon.
Browser tab — light
Browser tab — dark
Search result
A one-line description of the page, the way a search engine would show it next to your icon.
Home screen
Actual pixel sizes
16
32
48
64
180
Legibility at 16×16
- Average ink colour
- —
- On a light tab (#FFFFFF)
- —
- On a dark tab (#202124)
- —
The icon is drawn into a 16×16 canvas, its visible pixels are averaged with their alpha as the weight, and that colour is compared with each tab background using the WCAG 2.2 relative-luminance formula. It is a rough legibility signal for a whole icon, not a text contrast pass.
HTML you need in <head>
These are the standard tags. This page previews your icon, it does not resize or convert
it, so you still need to export four files into the root of your site:
favicon.ico, icon.svg, apple-touch-icon.png and the
two manifest PNGs. The Favicon Generator makes them all
from one image.
site.webmanifest
The rel="icon" and rel="apple-touch-icon" link types come from
the HTML Living Standard; the JSON follows the W3C Web Application Manifest spec.
How it works
Drop in the icon you plan to ship and this page shows it where people actually meet it: a 16×16 slot in a light and a dark browser tab, the bookmarks bar, a search result, a phone home screen, and a strip of true pixel sizes from 16 up to the 180×180 apple-touch-icon. Most favicons look great in a design tool and turn to mush at 16 pixels, so seeing the real size next to real chrome is the whole point. Type a page title and a domain to make the mock-ups read like your own site.
The legibility panel draws your icon into a 16×16 canvas, averages the visible pixels
weighted by their alpha, and compares that average with the light (#FFFFFF) and dark
(#202124) tab backgrounds using the WCAG 2.2 relative-luminance formula. A near-black
monogram scores about 21:1 on a light tab and only 1.3:1 on a dark one — which is exactly why
it disappears for dark-mode users. The HTML block uses the rel="icon" and
rel="apple-touch-icon" link types from the HTML Living Standard plus a
site.webmanifest shaped by the W3C Web Application Manifest spec.
Everything runs in your browser with the Canvas API. Your icon is never uploaded, so an unreleased logo stays private. Need the actual PNG and ICO files? Use the Favicon Generator; this tool is the sanity check before or after you export them.
Frequently asked questions
What size should a favicon be?
Ship one 32x32 favicon.ico for legacy browsers, one scalable icon.svg, a 180x180 apple-touch-icon.png for iOS home screens, and 192x192 plus 512x512 PNGs referenced from your web app manifest. The browser still draws most of them into a 16x16 tab slot, which is why this page shows that size next to the larger ones: if the mark is unreadable at 16 pixels, no amount of detail at 512 will rescue it.
Why does my favicon disappear in dark mode?
A near-black monogram scores about 21:1 against a light tab and only 1.3:1 against Chrome's dark tab colour (#202124), so it sinks into the background. The legibility panel measures this: it draws your icon into a 16x16 canvas, averages the visible pixels weighted by their alpha, and compares that colour with both tab backgrounds using the WCAG 2.2 relative-luminance formula. If either side scores under 3:1, add an outline or a background plate, or serve a second icon with a prefers-color-scheme media query.
Is my icon uploaded anywhere?
No. The file is read with an object URL and drawn with the Canvas API inside your own browser, and the page makes no network requests at all, so an unreleased logo stays on your device. There is no sign-up and no ad script. This tool only previews and writes the HTML; use the Favicon Generator when you need the actual resized PNG and ICO files.