Creating a QR code: URL, Wi-Fi, vCard and the settings that matter

A QR code that does not scan never tells you so. It sits there, printed on the leaflet, stuck in the shop window, and nothing happens when a phone comes close. The cause almost always comes down to three decisions taken at the moment the code was created: it is too small for the reading distance, its quiet zone was cropped away in the artwork, or the two colours lack any real difference in brightness. None of those mistakes can be put right once the job is off the press.

What a QR code actually contains

A QR code is not a link. It is a grid of modules encoding a string of characters, any string at all. The reader decodes that string, then the operating system decides what to do with it: if it starts with https://, it opens the browser; with WIFI:, it offers to join a network; with BEGIN:VCARD, to save a contact. Anything else turns up as plain text. The whole mechanism rests on getting a syntax right.

The grid grows with the payload. Versions run from 1 (21 × 21 modules) to 40 (177 × 177). A short URL of forty or so characters fits in version 3, which is 29 × 29 modules. A vCard filled in with name, phone, email and company climbs to version 6 or 7, so 41 to 45 modules a side. At a fixed printed size, the more modules there are, the smaller each one becomes, and the sharper the printing has to be. Shortening the content is still the most effective way to make a code readable.

The second parameter is error correction. Four levels exist: L (around 7% of the surface recoverable), M (15%), Q (25%) and H (30%). The higher the level, the better the code shrugs off a scratch or a fold, but the denser it gets for the same content. The Convertu generator is set to M, the usual compromise, whose theoretical capacity is somewhere around 2,300 bytes: room for any URL you like, but not for a whole paragraph.

Five content types, five syntaxes

The QR code generator assembles the payload for you from a form and shows the preview live. Everything runs in the browser: what you type, Wi-Fi password included, is never sent to a server.

URL and free text

Two subtleties. Characters outside plain ASCII, an accented name or a £ or € sign, are encoded in UTF-8 and cost two or three bytes instead of one: a string that looks short can fill the grid faster than you would expect. And the QR format's alphanumeric encoding mode, covering digits, capital letters and a handful of signs, could in theory compact a URL written entirely in capitals. This generator, though, always encodes in byte mode: putting your address in capitals will not lighten the grid, and it risks breaking the path if your server is case-sensitive. The real lever is still a shorter URL.

Wi-Fi

The syntax is WIFI:T:WPA;S:NetworkName;P:password;;. The characters \ ; , : " all carry a meaning in this format and have to be escaped. The tool does that for you, which heads off the classic case of a password containing a semicolon that breaks the code without warning anyone. iOS and Android both recognise the format natively from the camera app, with no third-party app needed.

One limitation worth knowing: a hidden network, one whose SSID is not broadcast, needs an extra parameter that this syntax does not emit, and the phone may simply fail to find it. For visitor Wi-Fi, set up a separate guest SSID with its own password instead. A randomly generated password is ideal here, since nobody will ever have to type it.

vCard, email, SMS

The vCard produced follows version 3.0 and holds first name, surname, phone, email and company. It is the most verbose type of all: every line makes the grid denser. If the code turns unreadable at the size you have planned, encode the address of a contact page instead. For email, the tool assembles a mailto: with URL-encoded subject and body, which pre-fills the message when it opens. For SMS it produces an SMSTO:number:message; enter the number in international format (+44…) so that it works from abroad too.

Colour, size, quiet zone

The quiet zone is the empty margin around the code: four modules minimum, without which plenty of readers never pick out the corner finder patterns. The tool includes it in the exported PNG; the mistake comes later, in the artwork, when someone crops the image to claw back space or drops it onto a dark block of colour. Keep that margin, and make sure it lands on a light part of the design.

For colour, the rule is a decisive difference in brightness, dark modules on a light background. Navy or forest green on white passes without trouble; mid grey on beige does not. Avoid inverting it, light modules on a dark background: recent phones often cope, older readers not always. To stay on brand, the colour picker gives you the exact hex value to copy into both fields of the generator.

Size is set between 100 and 800 pixels, 280 by default. That value fixes the resolution of the preview and of the exported PNG file, nothing more; it is the final layout that decides whether the code is readable out in the field.

Printing a QR code without making it unreadable

One rule of thumb almost always does the job: the side of the code should be about a tenth of the reading distance. A leaflet held in the hand and read at 30 cm needs 3 cm a side; a poster read at 2 m needs 20 cm. Below 2 cm, a slightly dense code turns temperamental even close up.

On resolution, allow 300 DPI: the 800-pixel maximum works out at 6.8 cm a side. For anything larger, enlarge the PNG without smoothing, using nearest-neighbour interpolation. The modules are squares with hard edges: a crisp enlargement stays perfectly readable, whereas a smoothed one blurs them and makes decoding fail.

• Keep the PNG. JPEG introduces artefacts around high-contrast edges, exactly where the decoder is looking for the boundary between two modules. If a platform refuses PNG, go through image format conversion with the quality set to maximum, then check again that the code still scans.
• Go for matt lamination. A gloss varnish throws the flash straight back and drowns the modules in a reflection.
• Be wary of curved surfaces such as cups: beyond a slight curve, the grid distorts and decoding fails.
• Do not sit the code on a photo. A flat block of colour, even a strong one, beats a textured background.

What a static code does not do

The content is baked into the grid: changing the destination means regenerating the code and reprinting the material. The way round it fits into a single sentence — never encode the final URL, encode a URL you control, a redirect page on your own domain, for instance. The printed code never moves again, the destination stays editable.

Second consequence: a static code does not count scans. To measure a campaign, add the tracking parameters to the URL before you generate the code (…?utm_source=poster&utm_medium=qr).

Finally, the logo in the middle. Level M tolerates roughly 15% of the surface being damaged, which in theory leaves room for a small central badge: it must neither exceed 10% of the surface nor encroach on the three large corner squares. The generator does not offer the option; if you add one in an image editor, test on several phones before going to print.

The code will not scan: what to check

1. Test on two phones at least, one iPhone and one Android, using the native camera app and not only whichever scanning app you happen to have to hand.
2. Test on the real material, at the real size, at the real distance. A preview on screen proves nothing about a leaflet.
3. Check the light margin all the way round the code, and that no layout element is biting into it.
4. Check the contrast by picturing the image in greyscale: if the two colours look alike once desaturated, the reader will struggle too.
5. If the preview flags the content as too long, shorten it: a shorter URL, a vCard stripped of its optional fields, a trimmed SMS message.
6. Hold the phone parallel to the surface: too sharp an angle distorts the grid to the point where nothing can be decoded.

The generator runs entirely in the browser: nothing is uploaded, no account is asked for, and the number of codes is not capped. Generate, download the PNG, print a test copy — that is the only check that really counts.