A QR code is a two-dimensional barcode invented by Denso Wave in 1994. It encodes data — most commonly a URL, but also plain text, contact info, Wi-Fi credentials, calendar events — as a square grid of black and white modules a camera can decode. The tool above generates QR codes in your browser using a JavaScript library; nothing leaves your machine.
Anatomy of a QR code
┌─────────────────────────────┐
│ ┌─┐ ┌─┐ data area │ ← Finder patterns (3 corners)
│ │ │ │ │ │ identify orientation
│ └─┘ └─┘ │
│ │
│ alignment │ ← Alignment patterns (in larger codes)
│ │
│ ┌─┐ data and ECC │
│ │ │ modules │
│ └─┘ │
└─────────────────────────────┘
- Finder patterns (the three big squares in the corners) let the scanner orient the code. Three corners are enough to determine rotation.
- Alignment patterns appear in larger codes to help the scanner correct for distortion.
- Timing patterns (rows and columns of alternating modules between finder patterns) help the scanner calibrate.
- Data area holds the encoded payload plus error correction.
Versions and capacity
QR codes come in versions 1–40, each adding 4 modules per side:
| Version | Modules per side | Numeric capacity | Alphanumeric | Byte | URL-typical |
|---|---|---|---|---|---|
| 1 | 21×21 | 41 | 25 | 17 | very short |
| 5 | 37×37 | 255 | 154 | 106 | short URL |
| 10 | 57×57 | 652 | 395 | 271 | normal URL with params |
| 20 | 97×97 | 2061 | 1249 | 858 | long URL or short message |
| 40 | 177×177 | 7089 | 4296 | 2953 | the maximum |
The version is determined by the data length and the error correction level. The tool above picks the smallest version that fits the input.
Error correction
QR codes include Reed-Solomon error correction so partial damage doesn’t break decoding. Four levels:
| Level | Recovery | Capacity cost |
|---|---|---|
| L (Low) | ~7% of modules | Smallest data overhead |
| M (Medium) | ~15% | Default |
| Q (Quartile) | ~25% | |
| H (High) | ~30% | Largest data overhead |
Higher correction = more redundancy = a code that survives more wear, smudging, or partial occlusion. The tradeoff is data capacity: a Level H QR code holds about half as much data as a Level L one of the same physical size.
For codes that may be physically printed and damaged, M or Q is a reasonable default. For digital codes that won’t be damaged, L gives more data per module.
Use case examples
URL: https://example.com/path/to/page
Phone: tel:+15551234567
Email: mailto:user@example.com?subject=Hello
SMS: sms:+15551234567?body=Hello
Wi-Fi: WIFI:S:NetworkName;T:WPA;P:password;;
vCard: BEGIN:VCARD
VERSION:3.0
FN:Alice
TEL:+15551234567
EMAIL:alice@example.com
END:VCARD
Calendar: BEGIN:VEVENT
SUMMARY:Meeting
DTSTART:20260430T140000Z
DTEND:20260430T150000Z
END:VEVENT
The phone OS recognizes most of these schemes and offers an action when scanning (call, send email, join Wi-Fi, save contact, add to calendar).
The most common use by far: URLs.
Logo embedding
It’s common to put a logo in the center of a QR code. Works because the error correction can reconstruct the obscured modules — provided you don’t obscure too many.
Rules of thumb:
- Use error correction level H when embedding a logo.
- Don’t cover more than ~25% of the area.
- Center the logo over the geometric middle (the center of the code, not the center of the data area).
- Test the result. If it doesn’t scan reliably, shrink the logo.
The tool above doesn’t embed logos. If you add one in an image editor, generate the code at the High error-correction level first, and test the result with several phones.
Color and contrast
The default is black on white. QR codes work in other colors as long as the contrast is high:
- Dark on light (any combination) is the standard direction. Some scanners reject light-on-dark.
- Color is fine as long as the dark areas are dark (black, navy, dark green) and the light areas are light (white, pale yellow). A QR code with a light blue background and dark blue modules works.
- Background patterns (paper texture, photo) sometimes work. Test before printing.
If you invert (light modules on dark background), most modern scanners handle it but some legacy ones don’t.
Quiet zone
QR codes need a “quiet zone” — a margin of empty space around the code — for reliable scanning. The spec says 4 modules of margin. Tighter margins fail more.
The tool above includes a 4-module quiet zone by default. Don’t add the QR code right against page edges or other content; respect the margin.
When QR codes are wrong
- Long URLs that can be shortened. A 200-character URL produces a dense QR code that’s hard to scan from across a room. Use a URL shortener (bit.ly, your own short-domain) and put the short URL in the QR code.
- Critical content that can’t be scanned twice. If the code fails, the user has no recourse. Always include the human-readable content (the URL itself, the phone number) alongside the QR code.
- Untrusted content. Users scan QR codes in the wild without inspecting them. This is a phishing vector — the tool can’t tell users that the URL is malicious. As an issuer, don’t put QR codes for untrusted-looking URLs (raw IPs, unrecognizable domains) in print materials.
Common pitfalls
- Too small to scan. Print QR codes at a size where each module is ≥ 0.5 mm. Smaller fails for many cameras.
- Color too low contrast. Pale modules on light background, or dark modules on dark background, refuse to scan.
- Skipping the quiet zone. A QR code crammed against text or graphics often fails.
- Embedding too much. A 1000-character payload produces a 100×100 code that’s hard to scan. Compress, shorten, or use a URL with the data hosted on the web.
- Using QR codes where humans typed input is faster. A short Wi-Fi password is easier to type than to scan.
For URL shortening before encoding, use any URL shortener. For other meta-data tools, see meta tag generator.