QR codes are one of those technologies that went from niche to universal almost overnight. Before 2020 they were largely ignored outside of Japan; after the pandemic made touchless everything essential, they're on every restaurant menu, bus stop, and product label.
But most developers still treat them as a black box. Here's how they actually work, what they can store, and how to create them correctly.
What is a QR code?
QR stands for Quick Response. A QR code is a 2D matrix barcode — a grid of black and white squares that encodes data. Unlike 1D barcodes (the kind on grocery items), QR codes can store significantly more information and can be scanned from any orientation.
QR codes were invented in 1994 by Denso Wave, a Toyota subsidiary, for tracking car parts in manufacturing. They published the format as an open standard, which is part of why it spread so widely.
What can a QR code store?
QR codes can encode any text. The scanner interprets the text based on well-known format conventions:
| Content type | Format | Example |
|---|---|---|
| URL | Any valid URL | https://example.com |
| Plain text | Any text | Hello, World! |
mailto: URL |
mailto:name@example.com |
|
| Phone number |
tel: URL |
tel:+12025551234 |
| SMS | SMSTO:number:message |
SMSTO:+12025551234:Hello |
| WiFi | WIFI protocol | WIFI:T:WPA;S:MyNetwork;P:password;; |
| Contact (vCard) | vCard format | BEGIN:VCARD\nVERSION:3.0\nFN:Name... |
| Location |
geo: URI |
geo:37.786,-122.399 |
| App Store link | App Store URL | Standard https URL |
WiFi QR codes are particularly useful. Guests at a venue can scan and automatically connect without typing the password. The format is:
WIFI:T:WPA;S:NetworkName;P:Password;;
The T: field is the authentication type (WPA, WEP, or nopass for open networks). The trailing ;; is required. Supported on Android 10+ and iPhone iOS 11+.
How QR codes work (the quick version)
A QR code has several functional regions:
- Finder patterns: The three square patterns in three corners. These let scanners locate and orient the code regardless of rotation.
- Timing patterns: Alternating black-and-white stripes that help calculate cell size.
- Alignment patterns: In larger QR codes, these help correct distortion.
- Data modules: The remaining cells, which store the actual encoded data.
Data is encoded using a combination of Reed-Solomon error correction and one of four encoding modes: Numeric (digits only), Alphanumeric (uppercase + digits + some symbols), Byte (arbitrary binary, including UTF-8 text), and Kanji.
Error correction levels
QR codes can be partially damaged or obscured and still scan correctly. There are four error correction levels:
| Level | Damage tolerance | When to use |
|---|---|---|
| L (Low) | 7% | Screen display, clean prints |
| M (Medium) | 15% | General purpose default |
| Q (Quartile) | 25% | When some damage is expected |
| H (High) | 30% | Overlaying a logo, outdoor prints |
Higher error correction = larger, denser QR code. For on-screen display, Level L or M is fine. For print materials where you want to overlay a logo in the centre, use Level H.
Static vs dynamic QR codes
Static QR codes encode the data directly. The URL or content is permanently embedded. They're free, work forever, and need no backend.
Dynamic QR codes encode a short redirect URL. The actual destination can be changed later without printing a new QR code. They require a paid service (Bitly, QR Tiger, etc.) and depend on that service remaining operational.
For most developer use cases — linking to a documentation page, contact card, or app store — a static QR code is the right choice. Dynamic codes are worth the cost only when you need analytics or the ability to update the destination later (e.g., event schedules, menus).
What size should a QR code be for print?
A QR code must be large enough for scanners to read. General guidelines:
| Use case | Minimum size |
|---|---|
| Business card | 2.5 cm × 2.5 cm (1 inch) |
| Flyer / poster | 3–4 cm (1.5 inches) |
| Banner / signage | 5+ cm, scaled to viewing distance |
| Outdoor billboard | 10+ cm for close range; scale up for distance |
The scanning distance is roughly 10× the QR code size. A 3 cm code is comfortable to scan at 30 cm (12 inches). For a banner on a wall 3 metres away, the code should be at least 30 cm.
Download QR codes as SVG (vector) if the tool supports it — you can scale an SVG to any size without pixelation. PNG is fine for fixed-size use on screen.
Creating a QR code without a third-party service
The QR Code Generator at SnappyTools creates QR codes for URLs, plain text, and WiFi credentials entirely in the browser — no server, no account, no data uploaded. Choose error correction level, download as PNG, and you're done. It uses the qrcode.js library which produces standard QR codes compatible with all modern phone cameras.
Generating QR codes programmatically
JavaScript (qrcode.js):
// npm install qrcode
const QRCode = require('qrcode');
const url = 'https://example.com';
QRCode.toDataURL(url, { errorCorrectionLevel: 'M' }, (err, dataUrl) => {
document.getElementById('qr').src = dataUrl;
});
Python (qrcode library):
# pip install qrcode[pil]
import qrcode
img = qrcode.make('https://example.com')
img.save('qrcode.png')
# With options
qr = qrcode.QRCode(error_correction=qrcode.constants.ERROR_CORRECT_H)
qr.add_data('https://example.com')
qr.make(fit=True)
img = qr.make_image()
img.save('qrcode-h.png')
Go (skip-go/qrcode):
import "github.com/skip2/go-qrcode"
qrcode.WriteFile("https://example.com", qrcode.Medium, 256, "qrcode.png")
One thing most developers get wrong
When encoding a URL in a QR code, make sure the URL is fully qualified with the scheme (https://). A code containing just example.com without https:// will not be auto-linked by most phone cameras — they need the protocol prefix to recognise it as a URL.
Always test the generated QR code by scanning it with a phone before distributing it.
Top comments (0)