Putting a logo in a QR code
Codes with a logo in the middle are everywhere. Once you know why they still scan, it becomes obvious how big the logo can be and which parts it must never touch.
A logo is planned damage
A QR code carries spare error correction bytes so it can recover its content when part of it is damaged. Dropping a logo into the middle deliberately spends that capacity. To the scanner, the covered modules are simply misread, and error correction fills them back in.
That is why raising the error level to H is effectively mandatory when you add a logo.
| Level | Recovers | Logo |
|---|---|---|
| L | ~7% | Better without |
| M | ~15% | Tiny only |
| Q | ~25% | Small |
| H | ~30% | Recommended |
How large can it be?
Level H recovering 30 percent does not mean a logo can cover 30 percent. That budget is shared with everything else that goes wrong: ink spread, shaky photos, glare. A logo that eats the whole budget leaves a code that only scans in perfect conditions.
In practice, keep the logo within 10 to 15 percent of the code's area, roughly a third of its width on each side. Go larger only after testing several phones, including in dim light.
Never cover these
- The three large corner squares. They are how a scanner finds the code at all. Error correction only helps after the code has been found.
- The strip beside the corner squares. It records the error level and mask. Lose it and there is no way to interpret the rest.
- The dotted line between the corners. It is the ruler for module spacing.
- The white border around the code. A logo that crosses the edge makes the scanner lose the boundary.
The centre is safe precisely because all of these sit near the edges. Their positions are shown in anatomy of a QR code.
Give the logo breathing room
A logo placed directly on the dots blurs into them. Put the logo on a white backing with about one module of margin and the scanner can cleanly ignore that area. Clearing the dots under the logo works better than overlaying on top of them.
This site does not offer logo overlays. A logo spends error correction capacity; blank space comes from emptying everything that is not error correction. Both draw from the same budget, and pushing both to the extreme is very likely to fail. If you need a logo, generate here at error level H with emptiness set to ‘Standard’.
After adding it
- Scan with the stock camera on both iPhone and Android
- Lower screen brightness and scan at a slight angle
- Print at the real size and scan the print