How to Add a Logo to a QR Code Without Breaking the Scan

Why a logo can sit on a QR code at all

Putting a logo on a QR code means covering part of the data. It works anyway, and understanding why is what separates a branded code that scans from one that looks fine and fails on a customer’s phone.

QR codes carry redundant data. The specification builds in error correction so a code still reads when part of it is dirty, torn, creased or obscured — the format was designed for a factory floor, not a design portfolio. A logo simply spends some of that allowance deliberately.

Which means the question is never “can I add a logo” but “how much of the budget am I spending, and on what”.

The four correction levels, and what they cost

Every QR code is generated at one of four error-correction levels, recovering roughly 7%, 15%, 25% and 30% of the code respectively.

The obvious move is to pick the highest and stop worrying. It is not that simple, because the redundancy has to be stored somewhere: a higher level adds more data, more data adds more modules, and more modules at the same printed size makes every module physically smaller. Past a point you have traded a resilient code for a dense one that the camera struggles to resolve at all.

The practical answer for most branded codes is a middle setting with a modest logo, tested. Reach for the highest level when the code will live somewhere genuinely hostile — a curved bottle, a fabric surface, a package that will be scuffed in transit — and accept the larger print size it needs.

How much can the logo actually cover

Stay well inside the level you generated at rather than at its edge. If the level recovers about 30%, a logo occupying close to 30% leaves nothing for the real world — and the real world is the whole point of the allowance.

The failure is also not gradual, which is what catches people out. A code does not become slowly harder to read as the logo grows; it reads reliably, then reads on some phones and not others, then stops. The middle stage is the dangerous one, because it passes the only test most people run.

Start smaller than you want, test, and grow it if the test is clean.

Where the logo must not go

Some parts of the pattern are structure rather than data, and error correction does not protect them.

The three large squares in the corners are finder patterns — how a scanner locates the code and works out its orientation. The smaller square near the fourth corner on larger codes is an alignment pattern, correcting for the distortion of a code photographed at an angle. The dotted lines running between the finders are timing patterns, which set the module grid.

Cover any of these and no amount of correction helps, because the scanner never gets far enough to use it. Keep the logo centred, keep it clear of the corners, and never crop the code to fit a layout.

Brand colours that work and brand colours that do not

Colour is where brand guidelines and scannability argue most often, and there are only a few rules that matter.

Contrast between modules and background is what a scanner reads, so it needs to be strong — and in the conventional direction, dark modules on a light background. Inverted codes, light on dark, are read by many scanners and not all of them, which makes them a gamble on printed material you cannot recall.

Mid-tone brand colours are the usual casualty. A colour that looks confidently dark on a backlit screen can sit far too close to the background once printed on uncoated stock. Gradients across the modules and photographic backgrounds behind them cause the same problem in a less predictable way.

A useful check without any tooling: convert the artwork to greyscale. If the pattern is still obviously dark-on-light, the contrast is real. If it turns to mush, so does the scan.

Keep the quiet zone

The specification requires a clear margin of four modules on all four sides. It is not padding and it is not a designer’s suggestion — it is how the scanner establishes where the code ends.

It is also the single most frequently destroyed part of a QR code, precisely because it looks like empty space that a layout could use. Text set right up against the edge, a border drawn around the code, a background image running underneath it, the code cropped flush to a panel edge — all of these remove it.

If space is tight, make the code smaller and keep the margin. A small code with its quiet zone intact reads; a larger one without it may not.

Export the right file for the job

Use a vector format — SVG or PDF — for anything that will be printed. Vector artwork keeps the module edges perfectly sharp at any size, and sharp edges are what the camera needs.

Use PNG for screens, email and documents that expect a raster image, and export it larger than you think you need. A QR code scaled *up* from a small PNG develops soft, blurred module boundaries, and blurred boundaries are read as ambiguous data.

Never take a code from a screenshot, and never let it pass through a lossy re-compression on the way to the printer. JPEG artefacts around high-contrast edges are precisely the wrong kind of noise.

Test it properly, which takes five minutes

A code that scans in the design tool has been tested against the ideal case: perfect focus, perfect light, a backlit screen, one device. None of those describe where it will be used.

• Print a proof at the real final size, on the real material — coated and uncoated stock behave differently.
• Scan it with at least one iPhone and one Android, ideally including an older phone with a weaker camera.
• Test in the actual lighting it will live in, including artificial light and, for anything outdoors, bright sun.
• Scan at the distance a real person will stand at, not at ten centimetres.
• Try it at a slight angle, which is how people actually hold a phone.
• If it is going on something curved or flexible, test it curved, not flat.

The failures that keep recurring

The same handful of causes account for nearly every branded code that fails in production: the logo grew during a design review and nobody retested; the quiet zone was cropped in the final layout; a brand colour that read as dark on screen printed as mid-grey; the code was scaled up from a small PNG and lost its edges; or it was tested only on the designer’s phone, which has a very good camera and knows the URL already.

All of them are caught by printing one proof and handing it to somebody else.