That grid of black squares is just data rendered as a pattern a camera can read. Here is what is inside and how to make your own.
A short history
QR ("Quick Response") codes were invented in 1994 by Denso Wave for tracking car parts. They became ubiquitous with smartphones, which turned every camera into a scanner. Today they appear on menus, tickets, ads, and payment terminals.
Anatomy of a QR code
- Finder patterns — the three corner squares that orient the scanner.
- Timing patterns — alternating lines that set the grid size.
- Alignment patterns — smaller squares that correct distortion in large codes.
- Data modules — the payload, encoded with Reed-Solomon error correction.
Versions and capacity
QR codes come in 40 versions (sizes). Version 1 is 21×21 modules; each step adds four modules per side. A version-1 code holds about 25 numeric or 17 alphanumeric characters; a version-40 code holds thousands. Pick the smallest version that fits your payload for fastest scanning.
Error correction levels
Higher correction (H) survives more damage or logo overlay but stores less data. For a clean URL, level M or Q is plenty. Levels: L (~7% recovery), M (~15%), Q (~25%), H (~30%).
Common use cases
- Links — send people to a page without typing a URL.
- Wi-Fi — encode network name and password for one-tap join.
- Contact / vCard — share details without an app.
- Payments — encoded payment requests.
Design tips
You can place a small logo in the center if you use a high error-correction level, and you can use brand colors — but keep the contrast high and never invert the finder patterns, or scanners will fail.
Static vs dynamic QR
A static code embeds the data directly (what this generator produces) — free and permanent. Dynamic codes point to a short URL that can be retargeted later, but they depend on a server and often cost money.
Generate one locally
Type text or a URL into the DevToolbox QR Code Generator and download a PNG. The encoding happens in your browser — nothing is sent anywhere.
- Enter the text or link.
- Choose a size.
- Download the scannable image.
- Can I track scans?
- Only if the QR points to a URL with tracking. A plain text QR has no analytics.
- Is my input uploaded?
- No. The code is built locally in your browser.
Reading QR codes programmatically
On the other side of generation, libraries like jsQR or a phone's camera API decode a
code by locating the finder patterns and reversing the Reed-Solomon error correction. Understanding
generation helps you design codes that decode reliably.
QR vs barcode
A traditional barcode stores a single line of data and needs a scanner pointed precisely. A QR code stores data in two dimensions, holds far more, and scans from any angle with a camera. That flexibility is why QR replaced barcodes for most consumer uses.
Accessibility of QR codes
Don't rely on a QR alone. Someone without a smartphone, or with a low-quality camera, can't use it. Always pair a code with the URL or instruction in text so the information is available to everyone.
Troubleshooting unscannable codes
- Too much data forcing a tiny, dense module grid.
- Low contrast (light-on-light or inverted finders).
- Printed too small for the scanning distance.
- A logo placed over a finder pattern.
Choosing the right version
Don't over-provision. A short URL fits in a small version that scans fast even on weak cameras. Only step up versions when your payload genuinely needs the capacity — bigger codes aren't "better," just denser.
Printing QR codes
For print, export at a high resolution and keep physical size generous (at least 2–3 cm) so phone cameras focus easily. A crisp, large-enough code beats a tiny high-DPI one every time.
QR codes and payments
Many payment apps use QR codes to encode account or transaction details. The same generation principles apply — keep the payload short, the contrast high, and the code large enough to scan in a busy environment.
Dynamic QR trade-offs
Dynamic codes point to a short link you can retarget, but they depend on a server and may expire or cost money. For permanent, private, offline use, a static code generated locally (like here) is simpler and free.
Accessibility recap
Always provide the destination as text near the code. A QR is a convenience, not a replacement for readable information — some users can't scan, and that's fine if the content is available another way.
QR codes in email
Marketers embed QR codes in email to bridge to a web action. Keep the same rules — short payload, high contrast, large enough to scan on a phone held at arm's length. A code that only scans on a desktop monitor defeats the purpose of a mobile bridge.