How QR Codes Work and How to Generate Them Online
June 10, 2026 · 7 min read
How QR Codes Work and How to Generate Them Online
QR codes are everywhere — product packaging, restaurant menus, conference badges, payment screens, transit tickets. They look like random noise, but every module (each black or white square) encodes specific data according to a precise specification. This guide explains how QR codes actually work, what the different parts mean, and how to generate them correctly for real-world use.
To generate a QR code right now, use the QR Code Generator — it runs entirely in your browser and never uploads your data anywhere.
What Is a QR Code?
QR stands for Quick Response. A QR code is a two-dimensional matrix barcode developed by Denso Wave in 1994 for tracking automotive parts. Unlike a standard 1D barcode that only encodes data horizontally, a QR code encodes data in both dimensions, allowing it to hold significantly more information.
A standard QR code (Model 2, the type you see everywhere) can encode up to 7,089 numeric characters or 4,296 alphanumeric characters in its highest capacity version.
Anatomy of a QR Code
Finder Patterns
The three large square patterns in the three corners (top-left, top-right, bottom-left) are finder patterns. Their unique appearance — a black border, white gap, then black square — lets a scanner detect and orient the QR code regardless of rotation or angle. There is no finder pattern in the bottom-right corner; that space is used for timing and alignment.
Timing Patterns
The alternating black-and-white lines running between the finder patterns are timing patterns. They tell the decoder the size of each module and establish the coordinate grid of the code.
Alignment Patterns
Larger QR codes (version 7 and above) include additional alignment patterns — smaller squares scattered within the code. They help scanners correct for image distortion, like when a code is photographed at an angle.
Quiet Zone
The blank border around the entire QR code is the quiet zone — at least 4 modules wide. Without it, a scanner cannot reliably detect where the code ends and the background begins. This is the most frequently violated best practice when printing QR codes.
Format and Version Information
Adjacent to the finder patterns, encoded in the QR code itself, is metadata about the code: the error correction level used, the mask pattern applied, and the version number.
Data and Error Correction Modules
The rest of the modules encode the actual data plus error correction codewords.
Versions: Size and Capacity
QR codes have 40 versions (sizes). Version 1 is 21×21 modules. Each version step adds 4 modules per side, so Version 40 is 177×177 modules. The version is chosen automatically based on how much data you're encoding — you don't usually set it manually.
| Version | Modules | Max Alphanumeric (Level M) |
|---|---|---|
| 1 | 21×21 | 20 characters |
| 5 | 37×37 | 154 characters |
| 10 | 57×57 | 395 characters |
| 20 | 97×97 | 1,030 characters |
| 40 | 177×177 | 3,391 characters |
A short URL like https://example.com/go requires a much smaller version than a full vCard contact with name, email, phone, and address.
How Data Is Encoded
QR codes support four encoding modes, chosen based on the content to pack data as efficiently as possible:
Numeric mode — digits 0–9 only. Most efficient: encodes 3 digits per 10 bits. Best for: order numbers, PINs, phone numbers.
Alphanumeric mode — 0–9, A–Z (uppercase only), and a small set of symbols (space, $, %, *, +, -, ., /, :). Encodes 2 characters per 11 bits. Best for: short codes, URLs if you can uppercase them.
Byte mode — any byte (default for URLs, text, email, arbitrary data). Uses ISO 8859-1 or UTF-8. Less efficient than numeric but unrestricted. This is what handles modern URLs, Unicode characters, and JSON.
Kanji mode — double-byte Japanese characters. Encodes Shift JIS kanji more efficiently than byte mode.
A single QR code can mix encoding modes mid-stream — a code might use numeric mode for a product ID segment and byte mode for a URL segment.
Error Correction: Reed-Solomon
This is what makes QR codes so robust. Each QR code includes Reed-Solomon error correction codewords alongside the data. If part of the code is damaged, dirty, or obscured, the scanner can mathematically reconstruct the missing data.
There are four error correction levels:
| Level | Recovery Capacity | Use Case |
|---|---|---|
| L (Low) | ~7% of data | Clean digital screens, no physical damage expected |
| M (Medium) | ~15% of data | General use — good default |
| Q (Quartile) | ~25% of data | Industrial environments, some expected damage |
| H (High) | ~30% of data | Logos overlaid on QR codes, high-damage environments |
Higher error correction means more redundant data, which means larger code (higher version needed for the same content) or lower capacity at the same version.
The Logo Trick
The reason you can overlay a brand logo on a QR code without breaking it is error correction. If the logo covers less than ~30% of the code area and you use Level H error correction, the scanner can recover the obscured data. This is a deliberate feature, not a bug. But test carefully — even with Level H, a large or poorly-positioned logo will break scannability.
Common Use Cases
URLs — the most common use. Keep them short (a URL shortener helps) to keep the QR code version low and the pattern less dense.
WiFi credentials — using the WIFI:T:WPA;S:NetworkName;P:Password;; format, most modern phone cameras can join the network directly without opening an app.
WIFI:T:WPA;S:MyNetwork;P:secretpassword;;
vCard contacts — the MECARD or VCARD format lets a phone add a contact on scan:
BEGIN:VCARD
VERSION:3.0
N:Doe;John
EMAIL:[email protected]
TEL:+15555550100
END:VCARD
Plain text — for instructions, verification codes, or any message.
Payment links — many payment providers support QR-encoded payment URLs.
Best Practices
Test before printing. Always scan the generated QR code with at least two different devices (iOS and Android) before printing it on anything permanent. What looks fine on screen sometimes fails at small print sizes.
Maintain the quiet zone. The blank border must be at least 4 modules wide on all sides. If you're embedding a QR code in a design, don't crop the quiet zone — it's not decorative, it's functional.
Choose the right error correction level. Use L for screen-only codes that won't be damaged. Use M for most printed materials. Use H if you're overlaying a logo or printing in conditions with potential physical wear.
Don't over-compress the image. Save QR codes as PNG, not JPEG. JPEG compression introduces artifacts that can corrupt the sharp black-white module boundaries. For print use, SVG or PDF vector output is ideal.
Keep content short when possible. Shorter content = lower version = simpler pattern = easier to scan, especially at small sizes.
Avoid tiny print sizes. The minimum recommended print size for a QR code is about 1 cm × 1 cm, and that's for a simple low-version code. Complex codes need more space. A useful rule: the quiet zone alone should be at least 1–2mm.
Privacy Note
When you generate a QR code in a client-side tool like the QR Code Generator, the data you enter is processed entirely in your browser using JavaScript. It is never sent to any server. This matters for sensitive content like WiFi passwords, internal URLs, or personal contact details. Always verify a generator is client-side before entering private data.
QR Code vs Other 2D Barcodes
You may also encounter Data Matrix (common in healthcare and electronics manufacturing, very compact), PDF417 (used on driver's licenses and boarding passes, rectangular), and Aztec Code (used on transit tickets, works without a quiet zone). QR Code is by far the most universally supported by consumer cameras and phone apps, making it the default choice for public-facing uses.
The QR Code Generator handles all common content types — URLs, WiFi credentials, plain text, email, phone, and vCard — and lets you set the error correction level, choose output format, and download the result.