Understanding: QR Codes

How those square barcodes store data, how cameras read them, and why you can put a logo on them without breaking anything.

What is a QR Code?

Quick Response Code - Born in Japan, 1994

A QR code (Quick Response code) is a two-dimensional barcode invented by Denso Wave in 1994 for tracking automotive parts. Unlike traditional barcodes that only store data horizontally, QR codes store data in both dimensions, allowing them to hold much more information.

Anatomy of a QR Code
Finder Patterns

The three large squares in the corners. They help cameras quickly locate and orient the code.

Alignment Pattern

Smaller square(s) that help correct distortion when the code is scanned at an angle.

Timing Patterns

Alternating black and white modules that help determine the grid size.

Data Modules

The actual encoded information, stored as black (1) and white (0) squares.

Quiet Zone

The white border around the code that separates it from surrounding content.

Format Info

Encodes the error correction level and mask pattern used.

How Cameras Read QR Codes

The Detection Process

When you point your camera at a QR code, a sophisticated algorithm kicks in. Here's what happens in milliseconds:

  1. Locate Finder Patterns - The scanner searches for the distinctive 1:1:3:1:1 ratio pattern in the three corners
  2. Determine Orientation - Using the finder patterns, the algorithm figures out which way is "up"
  3. Establish Grid - Timing patterns help map out the module grid precisely
  4. Sample Modules - Each cell is sampled to determine if it's black (1) or white (0)
  5. Apply Error Correction - Reed-Solomon codes repair any damaged or misread data
  6. Decode Data - The binary data is converted back to readable text

// Finder pattern ratio (1:1:3:1:1)

[black][white][black-black-black][white][black]

// This unique ratio is unlikely to appear naturally

// making QR codes easy to detect in any image

What Can Be Encoded?

Common Data Types

QR codes can store various types of data. Many apps recognize special formats and handle them automatically:

URLs

Open websites directly

https://example.com
Plain Text

Any text message

Hello, World!
WiFi Credentials

Auto-connect to networks

WIFI:T:WPA;S:MyNetwork;P:password;;
vCard (Contact)

Add contacts instantly

BEGIN:VCARD...END:VCARD
Email

Pre-fill email composer

mailto:hello@example.com
Phone Number

Dial directly

tel:+1234567890
SMS

Pre-fill text message

smsto:+123:Hello
Calendar Event

Add events to calendar

BEGIN:VEVENT...END:VEVENT
Geo Location

Open in maps

geo:40.7128,-74.0060

Error Correction Levels

Why Damaged QR Codes Still Work

QR codes use Reed-Solomon error correction, the same algorithm used in CDs and DVDs. This allows them to be read even when partially damaged or obscured.

LevelRecoveryBest For
L (Low)~7%Maximum data capacity, clean environments
M (Medium)~15%Default choice, balanced reliability
Q (Quartile)~25%Industrial use, outdoor signage
H (High)~30%Logos, artistic designs, harsh conditions
Why Stylized QR Codes Work

When you add a logo to the center of a QR code, you're essentially "damaging" those modules. With High (H) error correction, up to 30% of the code can be obscured and it will still scan. This is why companies can add branding to their QR codes without breaking them - as long as the logo doesn't exceed the error correction capacity.

Build Your Own

Interactive QR Code Generator

Unlock the QR Code Generator

  • Generate QR codes for URLs, text, and more
  • Download your QR codes instantly
  • Access all Academy demos

Free to use. No credit card required.

🚀
Need More Features?

Try our full-featured QR code generator with WiFi codes, vCards, custom colors, and more. Works completely offline on your device - no data leaves your browser.

Open YoListen QR Generator →

Technical Deep Dive

How Data is Encoded

QR codes support four encoding modes, automatically selected based on the content:

Numeric Mode

Digits 0-9 only. Most efficient - 3 digits per 10 bits.

Alphanumeric Mode

0-9, A-Z (uppercase), space, $%*+-./: - 2 chars per 11 bits.

Byte Mode

Any 8-bit character (UTF-8). 1 char per 8 bits.

Kanji Mode

Japanese characters. 1 char per 13 bits.

// QR code data structure (simplified)
+---------------------------------------+
| Mode Indicator (4 bits)               |
+---------------------------------------+
| Character Count (varies by mode)      |
+---------------------------------------+
| Encoded Data                          |
+---------------------------------------+
| Terminator (0000)                     |
+---------------------------------------+
| Padding (if needed)                   |
+---------------------------------------+
| Error Correction Codewords            |
+---------------------------------------+
Back to HomeView Workshops
QR Codes | Academy by Potato Battery Games