What browsers actually load in 2026
The long list of icon sizes is a historical artefact. Every current browser supports rel="icon" with an SVG and will scale it to whatever the interface needs, so one vector file plus a single raster fallback covers desktop and Android. Safari on iOS is the exception that still wants a dedicated PNG, delivered as apple-touch-icon at 180 px. Progressive web apps take their 192 and 512 px icons from the manifest, not from link tags.
That is four lines of markup and three or four files. The 16, 32, 48 and 64 px renders in this tool are there so you can inspect what the browser will produce, not because you need to ship all of them.
Why 16 pixels is the whole test
Sixteen pixels is 256 pixels total, and antialiasing spends a good number of them on grey edges. Fine strokes land between pixel boundaries and go pale. Two letters set close together merge. A gradient becomes a flat average. Anything with more than about three distinguishable elements loses them.
This is why so many companies use a different mark in the tab than on the letterhead — a single glyph, a monogram, one bold shape. If the detail figure here comes in below 45%, that is what it is telling you: not that the icon is badly made, but that it is the wrong icon for this slot.
Masks, padding and the edges
Home screen icons are not shown as you supply them. iOS crops to a rounded square. Android launchers apply a circle, a squircle or a teardrop depending on the device and the user's setting, and adaptive icons crop even further to leave room for parallax. Anything within roughly 10% of the edge is at risk on some device.
Padding of 5 to 10% on the large sizes solves it. Applying the same padding to the tab sizes does not help — at 16 px, two pixels of padding is an eighth of the icon gone for nothing. Export the two sets separately if it matters.
Transparency behaves differently per platform
A transparent background is correct for a tab icon: it sits on whatever chrome colour the browser uses, light or dark, and looks right in both. On an iOS home screen, transparency is composited against a solid colour that you do not control, and a logo designed for a white page can end up on black. Give the apple-touch-icon an explicit background.
Reading the detail figure honestly
The percentage compares average neighbouring-pixel brightness differences at 16 px against the same measure at 64 px. High means the small render still has hard edges; low means everything has blurred towards a flat average. It correlates with legibility but does not measure it — a solid two-tone shape can score modestly and still read perfectly, while a busy pattern can score high and be unrecognisable. Look at the true-size previews, use the number as a tiebreaker, and if you are unsure, put the tab in front of someone who has not seen the logo and ask what it is.
Questions people ask
Do I still need a favicon.ico file?
Rarely. Modern browsers read PNG and SVG icons from link tags perfectly well. The one thing an .ico still buys you is a favicon at the site root that legacy clients and some crawlers request without being told to, which is why many sites keep a 32 px one there. If nothing in your audience is old enough to need it, an SVG plus one PNG is a complete set.
The detail percentage looks fine but the icon is unreadable.
Trust your eyes. The metric measures how much local contrast survives the downscale, which is a proxy for sharpness rather than for recognisability. A dense pattern retains plenty of edge energy at 16 px while being visual noise. The true-size previews at the top of the result are the actual test.
My source is not square. What happened to it?
It was cropped to a centre square before scaling, because every icon slot is square and something has to be discarded. If the important part of your mark is not centred, the crop will cut it — prepare a square version with the artwork positioned where you want it and bring that instead.
Why does the tool not produce an SVG?
It cannot invent vector geometry from a bitmap. If you have the logo as vector artwork, export the SVG from the design file directly and use it as the primary icon; that is the file that scales to every size without any of the problems this tool is measuring. Come back here with a PNG export only to check what the raster fallbacks will look like.