Putting a logo in a QR code

Every QR code carries redundant data, so that a scratch, a smudge, or a fold does not make it unreadable. The amount depends on the error correction level chosen when the code is made. A logo works by deliberately spending that redundancy: the modules underneath it are lost, and the reader reconstructs them from the rest. The mechanism is explained in QR code error correction.

Those percentages are a ceiling, not a budget. They describe codewords, not area, and a logo rarely damages codewords in tidy whole units — a small square can clip pieces of many codewords at once. Anything else that goes wrong in real life, such as glare, a crease, or soft printing, draws on the same reserve. A code that has spent all of its redundancy on a logo has nothing left for the real world.

There is no single safe number, and any guide that gives one to the decimal place is overstating what it knows. The commonly cited rule of thumb is to stay well inside the recoverable fraction: at level H, a logo covering up to roughly a fifth to a quarter of the code’s area is often reported to work, and many designers stay noticeably smaller than that. At level Q, aim smaller still.

• Start small and grow. Begin with a logo around a tenth of the code’s width and enlarge it only while every test phone still reads it instantly.
• Centre it. The middle of the code is mostly data modules, which error correction can rebuild.
• Give it a clean edge. A white margin around the logo stops half-covered modules from reading as noise.
• Simpler codes tolerate it better. A short URL gives fewer, larger modules, so the same logo destroys less. A dense code with a long link can fail with a logo that would be fine on a coarse one.

Codes from this site use level Q by default, and drop to level M for very long links that would otherwise go beyond version 12. When you add a logo, the generator switches to level H, keeps the logo to about 12% of the symbol, and refuses content that is too dense to carry one — shorten the link in that case.

Error correction protects the data. It does not protect the structure the reader uses to find and orient the code in the first place. Covering any of these breaks the code no matter how high the error correction level is.

• The three finder patterns. The large squares in three corners tell the phone that this is a QR code and which way up it is.
• The format information. The thin strips of modules running beside the finder patterns record the error correction level and mask. Without them the reader cannot decode anything.
• The timing patterns. Alternating dark and light lines between the finder patterns let the reader count the grid.
• Alignment patterns. The smaller squares in larger codes, which help correct for perspective.
• The quiet zone. The blank margin around the outside. A logo or badge sitting on it stops the reader seeing where the symbol ends.

Most of what a centre logo achieves — recognisably yours, clearly intended — can be done outside the code, without spending any of its error correction.

• A branded frame. Place the code inside a panel in your brand colour, with the logo above it and a white area around the code itself.
• A caption. “Scan for the menu” next to the logo tells people what they get, which matters more to scan rates than decoration.
• Colour around, not in. Keep the code dark on light and put the brand colour in the surrounding design. See QR code colours for what the code itself can tolerate.

A plain code still scans on more phones, at smaller sizes, from further away. If you want a logo, the custom QR code generator places it in the centre for you, at level H and within the size limit above; the image is read in your browser and never uploaded. Then test the result thoroughly — at final size, on the final material, on several phones, in poor light. If it hesitates anywhere, use a simpler logo or none. The troubleshooting guide covers what else to check.

Add your logo with level H error correction, in your browser:Make a QR code with a logo