How to add a logo to a QR code (without breaking it)
A logo can cover roughly the middle 20–25% of a QR code's width, because error correction stores enough redundancy to rebuild the hidden modules. Beyond that, scanners start to fail.
6 min read · Updated
A QR code has no space set aside for a logo. The middle of the grid is ordinary data, and a logo placed on top hides it. The code keeps working only because error correction rebuilds the hidden modules. Stay within that budget and a branded code is safe. Go over it and the code may scan on your screen but fail on printed copies in dim light.
How big can a QR code logo be?
Error correction level H recovers roughly 30% of the code. That is a theoretical maximum. In practice, part of it goes on real-world damage such as print defects, glare, creases and a camera held at an angle, so leave plenty of headroom.
| Logo covers | Error correction | Verdict |
|---|---|---|
| Up to 15% of width | M or Q | Safe almost anywhere |
| 15–25% of width | H | Fine on paper, test before a big run |
| Over 25% of width | H | Expect failures on worn or badly lit copies |
Swipe the table to see all columns.
Percentages here are of the code's width, not its area. A logo one quarter as wide as the code already covers about 6% of its surface, which is roughly where a cautious design should stop.
Add a logo in the generator
- Build the code first in the generator and finalise the content. Changing the link afterwards regenerates the whole grid.
- Upload the logo. Error correction is raised automatically, and the modules underneath are removed instead of being painted over, so the scanner sees a clean gap rather than half-hidden modules.
- Make the logo smaller until the live scan self-test badge stays green, then stop. The badge decodes the rendered preview in your browser, so it reflects an actual scan.
- Export SVG for print; PNG only for screens.
Logo design rules for a scannable QR code
- Centre it. The middle is the safest place to lose modules. A logo over a corner can cover a finder pattern, and error correction cannot recover one.
- Give it a solid backing. A small padded square or circle of background colour behind the logo scans far better than a transparent logo sitting directly on the modules.
- Keep the logo simple. Printed at 2 cm, a detailed wordmark becomes an illegible smudge. A monogram or symbol stays readable; a full logo lockup does not.
- Keep contrast strong. Use dark modules on a light background. Fewer scanners can read inverted (light-on-dark) codes, and a logo makes them harder still.
- Shorten the content. A shorter link means a lower version and bigger modules, so each covered module matters less. Of all these tips, this one helps most.
Test the printed QR code, not the file
The self-test in the browser shows that the design decodes in ideal conditions. Before a print run, check a physical copy: print one at final size and scan it with an old phone and a new one, in bright light and in a dim room, from a little further away than people are likely to stand. If any of those scans fail, shrink the logo before changing anything else.
If a code that scanned on screen fails on paper, the scanning checklist will help you find the cause quickly.
Other ways to brand a QR code
A logo is only one way to brand a code. Module shapes, per-eye colours, a brand gradient and a captioned frame all change how a code looks without removing any data, so they carry less risk than covering the middle. If you want to go further, halftone QR art blends an entire picture into the grid.