Back to the blog

Images

Your logo in the middle, and it still scans.

Add your logo to a QR code without breaking it: how error correction makes room, how large a logo can be, contrast, print sizes, and vector files for print.

By Updated 6 min read

A QR code with a round logo in the middle, read by a phone

A logo in the middle of a QR code tells people whose it is before they scan. But a logo covers part of the code, and too large a one stops it from being read. The KeepSimp QR code generator works out exactly how much your logo costs, makes room for it, and reads the code back before you print it.

Why a code can lose a corner and still work.

A QR code is written in codewords, bytes spread over the whole square, and split into blocks that each carry error correction: extra codewords from which a reader can mend those it cannot read. At level L it can mend about 7% of the code, at M 15%, at Q 25% and at H 30%.

A logo is damage on purpose. The modules under it are left out (drawn light), so every codeword with a dark module there is lost. The generator counts those codewords block by block, and lets a logo use at most half of what any block can mend. The other half is left for what happens to a printed code: dirt, creases, glare and blur.

When your logo needs more, error correction is raised; when that is not enough, the code is made a few modules larger. Each of the eight mask patterns is tried and the one that loses least under the logo is kept. If no size fits, the generator says the largest logo that would.

Your logo in four steps.

Type what the code holds, then press Add your logo. Choose a PNG, JPEG, WebP, GIF or SVG, or one of the plain marks. It is read on your device; an SVG is cleaned first, so nothing in it can run.

Set its size (up to 30% of the code's width), the space around it and what it sits on: a square, a rounded square, a circle, or nothing. A logo with see-through parts sits on the code's light colour.

Choose colours and shapes to match. A gradient, round dots or leaf-shaped eyes all work; the check says when a choice reads less well small.

Download it as SVG, PDF or EPS for print, sharp at any size, or as PNG.

Checked, small and in poor light.

Every code is read back with zxing-cpp in three pictures: as made, small and a little out of focus, and in dim, uneven light. Logos of every size the generator allows were measured this way: none failed. Codes that use more of what a block can mend began to fail when they used four fifths of it, which is why a logo is held to half.

Contrast matters more with a logo, because it already uses some of the code's margin for error. Dark modules on a light background, at a contrast of 4.5 to 1 or more, scan everywhere.

Files for print.

SVG, PDF and EPS keep the code as shapes, so it prints sharp at any size, gradients and all, with the logo inside as a picture. PDF and EPS can also carry the CMYK values your printer gives you for each colour; the generator writes them exactly as typed.

Print a code at least 2 cm across, and larger the further away people will be: it scans from about ten times its width. Then scan the first print with your own phone before you print many.

Further reading

Topics: qr code with logo · logo qr code · custom qr code · qr code error correction · qr code eps · qr code size for print

A little less theory. A little more doing.

Try it on your own terms, with a free browser tool.

Try the tool