Putting a logo in a QR code without breaking it

The design comes back with the company mark sitting proudly in the middle of the QR code, error correction set to H, and a note saying “H allows 30% damage so we’re fine”. Two of those three things are true and the conclusion is wrong.

What the 30% figure actually means

Level H adds enough Reed-Solomon redundancy to recover approximately 30% of the symbol’s codewords. That is a statement about data, made under assumptions that a centred logo violates:

• It counts codewords, not picture area, and the data is interleaved across the symbol rather than laid out in reading order.
• It assumes damage is detected — the decoder knows a codeword is suspect. A clean white block reads as valid light modules, which costs roughly twice as much correction capacity as damage the reader can identify as damage.
• It leaves nothing in reserve for the scuff, the fold, the bad angle and the poor light that the code will also encounter.

So the theoretical 30% is a ceiling you should never approach. Treat 25% of the code’s width — about 6% of its area — as the upper limit, and plan for 20% of the width, roughly 4% of the area, as the working figure.

Area, width, and why designers get this wrong

A logo’s visual size is its width; its cost to the code is its area, and area is the square of width. That gap is where the mistakes live. Plan in width, because that is what every slider in every tool is calibrated in — the generator here starts at 20% for exactly this reason.

Going from 20% to 30% of the width sounds like half as much logo again. It more than doubles the covered area, from 4% to 9%, because area grows with the square — and that non-linearity is why codes land just past the line in batches.

The white padding ring counts toward the figure. If the mark is 20% of the width and sits inside a ring that takes the whole assembly to 26%, your number is 26% — 6.8% of the area, not 4%.

Structure you must not touch

Error correction protects data modules. It does not protect the parts of the symbol that make it findable:

• The three finder patterns — the big squares in the top-left, top-right and bottom-left corners, each seven modules wide plus a one-module separator. These are how the reader locates the symbol and works out its rotation.
• The timing patterns — the alternating dotted lines running between the finders along the seventh row and seventh column. These establish the module grid.
• The format information — the band immediately around the finders, which encodes the error correction level and the mask pattern.
• The alignment patterns — smaller concentric squares that appear from version 2 upward and help correct for perspective distortion.

A centred logo of a sane size clears all of these. A logo pushed off-centre, or a decorative frame drawn over the corners, does not. If you want the brand mark somewhere other than the middle, put it outside the code entirely, past the quiet zone.

The white ring is doing real work

A logo dropped straight onto the module grid leaves its own dark shapes interleaved with the code’s, and the decoder cannot tell where the symbol’s data ends and the artwork begins. A solid white ring — one or two modules wide — turns an ambiguous region into a cleanly missing one, which is exactly the case Reed-Solomon handles best.

The generator on this site composites the logo with a white padding border for this reason. Keep it. A logo with a transparent background and no ring is the version that fails.

Square logos versus circular ones

At the same apparent size, a circle covers about 78.5% of the area a square does, so a circular logo destroys roughly a fifth less data than a square one of the same width. A 25%-width circle covers about 4.9% of the symbol; a 25%-width square covers 6.3%.

That is a genuine argument for a round badge or a circular knockout, and it is also why a wide horizontal wordmark is the worst shape here — it stretches toward the timing patterns while adding nothing back. If the brand is a wordmark, use the icon on the code and put the wordmark underneath it.

Keep the logo’s own colours dark against the white ring, or the ring and the logo merge into one large blank patch. The reasoning behind that is the same luminance argument in which QR code colour combinations actually scan.

Size the code for the logo, not the other way round

This is the step that gets skipped. Setting level H already promotes the symbol to a higher version — a sixty-character URL goes from 33 modules per side at M to 45 at H — so every module is about 26% smaller before the logo has covered anything. Then you take another 4% of what is left out of the middle.

The practical consequence: a code with a logo needs to be printed larger than the same code without one. If the plain version wanted 25 mm, give the logo version 32–35 mm. What L, M, Q and H really cost you has the version-by-level numbers, and the print size guide has the module-size floors for each printing process.

If the layout genuinely cannot spare the space, drop the logo. A working plain code beats a branded one nobody can scan.

PNG, SVG and where the logo lives

Worth knowing before you brief a printer: the SVG export from this site does not contain the logo. The two files come off different steps — the SVG is written straight out of the encoder as vector geometry, while the logo is drawn onto a canvas after the symbol has been rasterised, so it survives only into the PNG. The FAQ says the same in one line. It is not an oversight: the SVG you hand a printer is a clean, pure vector symbol.

For a large printed code with a logo, the right workflow is:

1. Export the SVG from the generator at level H.
2. Place it in your layout tool at final size.
3. Position the logo over the centre there, with a white ring, sized from the table above.
4. Keep everything vector so the modules stay hard-edged at any scale.

For screens, slides and email, the PNG with the composited logo is fine and faster.

Test it before it goes anywhere

Print one copy at final size on the final stock. Scan it with at least three phones — including an old cheap Android one — from the distance a real person will stand at, in the light the code will actually live in. Then scan it again at a 30-degree angle, because nobody holds a phone square to a menu.

If any of those fail, shrink the logo by 5% of the width and repeat. That is almost always enough, and it is a great deal cheaper than discovering the problem across ten thousand printed covers. The rest of the failure modes worth ruling out at the same time are in why your QR code is not scanning.