QR Codes & Data Encoding Guide

What Are QR Codes?

QR (Quick Response) codes are 2D barcodes that encode text, URLs, contact info, Wi-Fi credentials, and more. They were invented in 1994 by Denso Wave for tracking car parts, but now they're everywhere, from restaurant menus to payment systems.

How QR Codes Work

A QR code encodes data in a grid of black and white squares (modules). Key components:

Finder patterns: the three large squares in corners that help scanners locate and orient the code
Alignment patterns: smaller squares that correct for distortion
Data & error correction: the actual encoded information plus redundancy for damage recovery
Quiet zone: empty border around the code (at least 4 modules wide)

Error Correction Levels

QR codes can still be read even when partially damaged, thanks to Reed-Solomon error correction:

Level L (Low):      ~7% damage recovery  , smallest size
Level M (Medium):   ~15% damage recovery , good default
Level Q (Quartile): ~25% damage recovery , for printed media
Level H (High):     ~30% damage recovery , for logos in center

Use Level H if you want to place a logo in the center of your QR code, the high redundancy lets the code survive the obscured area.

Data Capacity

QR codes can hold up to ~4,296 alphanumeric characters, but shorter data produces smaller, easier-to-scan codes:

URLs: Use short URLs when possible
Wi-Fi: WIFI:T:WPA;S:NetworkName;P:password;;
vCard: Full contact information
Plain text: Up to ~4KB

Favicons

Favicons are the small icons shown in browser tabs, bookmarks, and mobile home screens. Modern sites need multiple sizes:

16×16  , browser tab (classic)
32×32  , browser tab (HiDPI)
180×180. Apple touch icon
192×192. Android home screen
512×512. PWA splash screen

<!-- HTML -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

SVG favicons are the modern best practice, they scale to any size and support dark mode via CSS media queries.

Try our QR Code Generator, Favicon Generator, or Favicon Size Checker.

FAQ

Can I put a logo inside a QR code?

Yes, use error correction level H and keep the logo small (under 30% of the QR area). The high redundancy compensates for the obscured modules. Always test the result with multiple scanners.

Should I use SVG or PNG for favicons?

Use SVG as your primary favicon (scales perfectly, supports dark mode). Keep a 32×32 PNG fallback for older browsers. For Apple devices, a 180×180 PNG is still required.