Putting a logo on a QR code without breaking it

Why a logo works at all

Every QR code carries redundant data so it can still be read when part of it is dirty, creased or covered. A logo in the middle uses up that budget deliberately: the reader reconstructs what the logo hides.

The budget is finite, and it is shared with everything else that goes wrong in the real world — a phone at an angle, a screen with glare, a cheap print. A code that scans on your desk and fails on a poster usually spent its whole budget on the logo.

The four things that actually decide it

1. Content length. More characters means more modules, and smaller modules are harder to read. A long tracking URL is the usual culprit; shorten it before you blame the logo.
2. Logo size. Keep it to a small square in the middle, on a white backing so it does not merge into the pattern.
3. The quiet zone. The empty margin around the code is part of the code. Cropping it tight, or laying the code on a busy photo, breaks more scans than logos do.
4. Contrast. Dark code on a light background. Light-on-dark works on some readers and not others; coloured codes need the dark parts genuinely dark.

Test it the way it will be used

Scan the final file with a phone that is not yours, from the distance people will actually stand at, and — if it is going to print — from the printed piece, not the screen. A code that will end up on a business card should be tested at that size, not at full screen.

If it fails, take the logo down a size before you touch anything else. That usually fixes it.

Doing it in ToolMelo

1. Open the QR Code Generator and enter the content. The byte counter shows how much of the budget you have used: up to 500 bytes, or 300 with a logo, which keeps the modules big enough for a phone.
2. Add the logo. It is scaled and given a white backing automatically, and the error correction is raised to pay for it.
3. After generating, the code is read back in your browser to check it still scans; if it does not, you are told to shorten the content or shrink the logo.
4. Download PNG for print or SVG for artwork, and test-scan the real thing anyway.