QR codes explained: error correction, sizes, what to encode, and printing them properly

A QR code is a two-dimensional barcode that most people meet as a black-and-white square and never think about again — until one they printed refuses to scan on a customer’s phone, or the URL inside it turns out to be wrong on ten thousand flyers. The reasons codes fail are consistent and avoidable: too dense for the size they are printed at, not enough contrast, no quiet zone, or a destination that could not be changed afterwards. This guide covers how a code actually stores data, what the four error-correction levels really trade away, how to size and print one that works, and the URL decisions to make before you generate anything — with the QR code generator here producing PNG or SVG for whichever medium you are heading to.

What is inside the square

The individual squares are called modules, and only some of them are your data. The three big squares in the corners are finder patterns — they let a camera locate the code and work out its rotation, which is why a QR code scans upside down and at an angle. Smaller alignment patterns correct for the distortion of scanning a curved or tilted surface; the dotted timing patterns between the finders tell the scanner how wide one module is; and a band around the finders holds format information describing the error-correction level and the masking pattern applied to make the code visually noisy enough to read reliably.

Codes come in 40 versions, from version 1 at 21×21 modules to version 40 at 177×177. The generator picks the smallest version that fits your data at the error-correction level you chose — which is why adding a few characters to a URL sometimes makes the whole code visibly denser: it has crossed into the next version.

How the data is encoded matters more than people expect, because there are four modes with very different efficiency:

That second row is a genuinely useful trick. A URL written entirely in uppercase can be encoded in alphanumeric mode at 5.5 bits per character instead of 8 — a third smaller, which often means a lower version and visibly chunkier, easier-to-scan modules. HTTPS://EXAMPLE.COM works because schemes and domain names are case-insensitive. Be careful past the domain, though: paths, query strings and short-link codes usually are case-sensitive, so uppercase them only if you know the destination tolerates it.

Error correction: what you are actually buying

QR codes use Reed–Solomon error correction, the same family of maths behind CDs and deep-space transmissions, and it is why a code with a coffee stain or a logo over the middle still scans. You choose how much:

The trade-off is the part that gets missed: redundancy is extra data, so raising the level for the same URL produces a denser code. Choosing H and then printing at the same physical size makes each module smaller, and you can easily end up with a code that is harder to scan than the M version would have been. Raise the level and the print size together, or keep M and print it properly.

Printing one that works

• Size by distance.Minimum width ≈ scanning distance ÷ 10. A poster read from three metres wants a 30 cm code; a table tent read at arm’s length wants 3–4 cm. Below about 2 cm, only short URLs at low error correction stay reliable.
• Leave the quiet zone. The specification calls for a clear margin of four modules on every side, and scanners genuinely rely on it. This is the single most common reason a code that looks fine in a layout fails on a printed page, because a designer cropped it flush to a coloured panel.
• Dark on light, with real contrast. Cameras look for a light field with dark modules. Inverted codes work on some scanners and not others, and mid-tone brand colours on a pastel background are a coin toss. Black on white always works; if you must use brand colours, keep the dark modules genuinely dark and test on several phones.
• Vector for print.A PNG scaled up for a poster gets soft edges that blur module boundaries. The generator’s SVG download stays crisp at any size, and is what you should hand to a printer.
• Mind the surface. Glossy laminate reflects flash; a code wrapped around a bottle needs the alignment patterns of a larger version to survive the curve; fabric distorts. Test on the real material, not on your monitor.

One specific note about this generator: it renders with a two-module margin rather than the specified four. On screen that is usually fine, but when you place the image into a print layout, add white space around it so the total clear margin is at least four modules wide. It costs nothing and removes the most common cause of field failures.

Logos and colour

Putting a logo in the middle works because error correction can rebuild what the logo covers — but it is a budget you are spending, not free space. Keep the covered area well under the level’s tolerance (a logo occupying more than about a fifth of the code is pushing it even at H), keep it central where the data is least concentrated, never cover a finder pattern, and always test the printed result rather than the design file.

The generator lets you set the module and background colours directly, which is handy for matching a brand — and easy to overdo. Check the pair for genuine contrast, and remember that a code is scanned in bad light, at an angle, by a cheap camera, by someone in a hurry.

Decide the URL before you generate

The pattern is a fixed encoding of whatever text you gave it. There is no editing afterwards, which makes the destination the most consequential choice on the page:

• Encode a redirect you control. A short URL on your own domain that forwards to the real page lets you fix a mistake, move the campaign, or retarget the code later. Encoding the final destination directly means a reprint if anything changes.
• Include the scheme. https://example.com, not example.com — without it, many scanners treat the content as plain text and show it rather than offering to open it.
• Keep it short. Every character makes the code denser. Long tracking parameters are the usual culprit; put them on the redirect target instead of in the encoded URL.
• Watch the encoding of what you paste. Spaces and non-ASCII characters in a URL should be percent-encoded — the URL encoder handles that, and the encoding guide explains which mode to use.
• Test the actual code, not the URL. Scan it with an iPhone and an Android phone, from the distance and in the light where it will really be used, before it goes to print.

QR codes can hold more than URLs — Wi-Fi credentials, a vCard contact, a calendar event, an email draft — all as specially formatted text strings. They work, and they make the code much denser, so print them large.

The security angle

A QR code is unreadable by humans, which is exactly what makes it useful for attackers: a sticker placed over the code on a parking meter, a restaurant menu or a payment terminal sends people somewhere else entirely, and nothing about the sticker looks wrong. This has a name — quishing — and it is common enough that several national agencies have issued warnings about it.

Two defences, both simple. As a scanner: read the URL preview your phone shows before opening it, and be sceptical of any code that leads straight to a login or a payment. As someone deploying codes: print them rather than sticking them on, laminate where you can, and check periodically that nobody has covered yours.

Using the generator

Type or paste the text, pick a size (128 to 1024 pixels) and an error-correction level, adjust the colours if you need to, and the preview redraws as you type. Download as PNG for screens and email, or SVG for anything that will be printed or resized. The code is generated in the page — the text you encode is not sent to a server, which matters when it is a Wi-Fi password, a private link or an unreleased campaign URL.