How to Compare Two Versions of a Logo or Icon

Small assets, small differences, big consequences

A logo is the one image a company cannot afford to get subtly wrong. It appears everywhere, side by side with itself across a website, an app, an email template and a print run — and inconsistencies that would be invisible in a photograph are glaring when two versions of the same mark sit next to each other.

The differences that cause trouble are exactly the ones the eye is worst at catching in isolation:

• A colour one shade off. Someone re-exported from a file in the wrong colour profile. Looks fine alone; obviously wrong next to the correct version.
• A few pixels of padding added or lost. Changes the optical size of the mark everywhere it is placed.
• Stroke weight drift from a re-trace or a scale-and-flatten round trip.
• A slightly different corner radius after an icon was rebuilt rather than copied.
• Anti-aliasing differences from exporting at the wrong scale and downsizing.

None of these survive a direct comparison. All of them survive a glance.

Getting a fair comparison

Assets have transparency and are often tiny, so a little preparation matters.

Export both at identical dimensions. Comparing a 512px icon against a 256px one measures the resize. Match them first.

Flatten transparency onto the same background. A PNG with an alpha channel compared against one without it will differ everywhere the alpha differs, which tells you nothing about the artwork. Put both on the same solid colour — white and a mid grey are both useful, and they reveal different problems.

Export at a larger size than you need. Comparing at 512px or 1024px gives the analysis more to work with than 32px does, and differences that matter at large sizes matter at small ones too.

Then upload both to image comparison.

Reading the result

Because logos are mostly flat colour with hard edges, the heatmap on these is unusually easy to read.

Difference outlining every edge, evenly. The shape moved or scaled slightly. Even a one-pixel offset lights up every boundary in the mark. Check your export dimensions and padding.

Difference filling a solid region. A colour changed. The area that lights up is the area whose fill differs — often exactly one element of a multi-colour mark, which points you straight at what to fix.

Difference on one element only. Something specific was edited: a redrawn letterform, a moved element, a changed corner. This is the cleanest signal you can get.

A near-blank heatmap with faint edge noise. The two are the same artwork exported slightly differently — different anti-aliasing or a different renderer. Usually acceptable, but if you are chasing pixel-perfect consistency, it tells you the exports did not come from the same pipeline.

Practical checks worth building in

Before accepting a delivered asset. Compare what the designer or agency sent against the approved master. Catches wrong-version deliveries, which are more common than anyone admits.

After any format conversion. SVG to PNG, PNG to WebP, or a favicon generator run — compare the output against the source render.

Across a full icon set. If a set was rebuilt, comparing old against new for each icon finds the two or three that changed when they should not have, without inspecting all sixty by eye.

After a design-system update. Confirm which assets actually changed, so you only re-publish those.

Where this fits with automated testing

If you already run visual regression tests on your UI, brand assets are a natural thing to add — they are stable, they should never change unintentionally, and a comparison is fast. See automating visual regression testing for wiring comparisons into a pipeline rather than running them by hand.

What it will not tell you

It will not tell you whether the new version is better, whether a change was intentional, or whether a mark works at 16 pixels. It tells you precisely what differs between two files — which is the question you cannot answer reliably by looking.

Try it

Compare two images → — export both at the same size, flatten transparency, and upload. You will get a similarity score and a heatmap showing exactly which part of the mark moved.