Loading page
About this tool
Check a favicon on light and dark browser tabs, measure WCAG contrast against each tab colour and spot pinned-tab problems.
Favicon Dark Mode Preview renders your icon on a simulated light and dark browser tab strip and measures the WCAG 2.x contrast ratio of the artwork against each background, including per-pixel coverage below the 3:1 threshold set by SC 1.4.11 Non-text Contrast. It also reports transparency, edge padding, saturation and brightness spread — the four things that decide whether a mark survives being drawn at 16 pixels. Everything is decoded in your own browser, so the file never leaves the device.
Open Favicon Dark Mode Preview on AltFTool — it loads instantly in your browser.
Paste your code or data sample into the workspace.
Pick the format, conversion, or analysis you need.
Copy the polished result straight back into your project.
Light and dark tab strips render at once, independently of the theme you are browsing in.
Reports the WCAG contrast ratio and the share of pixels that fall under 3:1 on each background.
The icon is decoded with a canvas in your browser — nothing is uploaded to a server.
Serve two icons and let the browser choose: <link rel="icon" href="light.svg" media="(prefers-color-scheme: light)"> plus a dark counterpart. An SVG favicon can also switch internally with a prefers-color-scheme media query in its own stylesheet. If you must ship one file, give the mark a contrasting outline or a solid plate behind it.
Aim for at least 3:1 against the tab background, the WCAG 2.1 SC 1.4.11 minimum for graphical objects. A ratio of 1:1 means the artwork is the same luminance as the tab and is effectively invisible; pure white on a dark Chrome tab strip is roughly 16:1.
A scalable SVG plus a 32 x 32 PNG covers most browsers, with a 180 x 180 apple-touch-icon for iOS home screens and a 192 x 192 and 512 x 512 pair in the web app manifest. Multi-size .ico is only needed for very old Internet Explorer support.
Pinned tabs use a single-colour mask, so all colour information is discarded and only the silhouette remains. If shapes in your icon are separated by hue rather than by brightness they merge together — supply a dedicated monochrome SVG via <link rel="mask-icon">.