QR Code Generator Guide: Error Correction, Formats, and Use Cases

QR codes are everywhere — product packaging, restaurant menus, event tickets, login screens. As a developer you need to generate them for URLs, app deep links, WiFi credentials, vCards, and 2FA setup. But there are real decisions to make: what error correction level to pick, what format to output, how large the code should be, and what data each QR type expects. Use the QR Code Generator to follow along.

How QR Codes Store Data

A QR code is a 2D matrix barcode that encodes data as a pattern of black and white squares (called modules). Scanners read the pattern and decode the bytes back into text or binary data.

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

Practical implication: uppercase URLs use alphanumeric mode and store more data per module than lowercase. HTTPS://EXAMPLE.COM/PROMO generates a smaller, less dense QR code than https://example.com/promo — though most modern phones handle both fine.

Error Correction Levels

QR codes use Reed-Solomon error correction, which allows a scanner to reconstruct the original data even when part of the code is damaged, dirty, or obscured. There are four levels:

Higher error correction means more redundant data, which means more modules, which means a larger (denser) QR code for the same payload. The tradeoff is real: an H-level code for a long URL may be significantly harder to scan at small print sizes than an L-level version.

Rule of thumb: Use M for most cases. Use H only when you need to overlay a logo or the code will be printed on rough surfaces.

Versions and Physical Size

QR code "versions" (1–40) describe the module grid size, not the rendered pixel size. Version 1 is 21×21 modules. Version 40 is 177×177 modules. The library automatically selects the minimum version required to encode your data at your chosen error correction level.

What actually matters for scanning reliability is the minimum module size in print. The ISO standard recommends each module be at least 0.25mm in print. A version-5 QR code (37×37 modules) needs at least 9.25mm × 9.25mm to scan reliably.

For digital use (screens, PDFs, emails), render at a minimum of 200×200px. Smaller than that and low-resolution cameras struggle. For print, export as SVG — it scales to any size without pixelation.

Output Formats: PNG vs SVG

SVG QR codes are vector graphics — each module is a <rect> element. This means they scale perfectly for large print, and you can style them with CSS (change colors, add rounded corners, embed a logo).

<!-- SVG QR code structure (simplified) -->
<svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
  <!-- Each rect is one module -->
  <rect x="0" y="0" width="1" height="1" fill="#000"/>
  <rect x="1" y="0" width="1" height="1" fill="#000"/>
  <!-- ... 800+ more rects for a typical URL ... -->
</svg>

Data Formats for Common Use Cases

QR codes are just bytes — but conventions exist for structured data types so that phones know how to handle them.

URL

Plain URL string. Keep it short — every extra character increases code density. Use a URL shortener for analytics tracking links.

https://example.com/promo?utm_source=qr

WiFi Credentials

Android and iOS both support scanning QR codes to join WiFi networks. The format is a structured string starting with WIFI::

WIFI:T:WPA;S:MyNetworkName;P:MyPassword123;;

Fields: T = authentication type (WPA, WEP, or nopass), S = SSID, P = password, H = true if hidden network. Special characters in SSID or password must be escaped with a backslash: ;, ,, ", \.

vCard Contact

The vCard 3.0 format lets phones import a contact directly from a scan:

BEGIN:VCARD
VERSION:3.0
FN:Jane Smith
ORG:Acme Corp
TEL;TYPE=WORK,VOICE:+1-555-010-1234
EMAIL:jane@acme.com
URL:https://acme.com
END:VCARD

Keep vCards short. Long vCards produce dense, hard-to-scan codes. Include only essential fields.

2FA / TOTP Setup

Authenticator apps (Google Authenticator, Authy, 1Password) scan an otpauth:// URI to configure TOTP:

otpauth://totp/Acme%20Corp:jane@acme.com?secret=JBSWY3DPEHPK3PXP&issuer=Acme%20Corp&algorithm=SHA1&digits=6&period=30

Parameters:

• secret — base32-encoded shared secret (generate with an OTP tool)
• issuer — app name shown in the authenticator
• digits — 6 (standard) or 8
• period — 30 seconds (standard)
• algorithm — SHA1 (most compatible), SHA256, or SHA512

Email

mailto:support@example.com?subject=Help%20Request&body=Hi%20there

SMS

sms:+15550101234?body=Hello

Geo Coordinates

geo:37.7749,-122.4194

Generating QR Codes Programmatically

For server-side generation (Node.js, API endpoints, CI pipelines), the most popular library is qrcode:

npm install qrcode

import QRCode from 'qrcode';

// Generate as data URL (PNG, for <img> tags)
const dataUrl = await QRCode.toDataURL('https://example.com', {
  errorCorrectionLevel: 'M',
  width: 300,
  margin: 2,
  color: {
    dark: '#000000',
    light: '#ffffff',
  },
});

// Generate as SVG string
const svg = await QRCode.toString('https://example.com', {
  type: 'svg',
  errorCorrectionLevel: 'M',
});

// Write to file
await QRCode.toFile('./qr.png', 'https://example.com', {
  errorCorrectionLevel: 'H',
  width: 500,
});

For client-side generation (React, browser), use qrcode.react:

import { QRCodeSVG } from 'qrcode.react';

export function MyQRCode({ value }: { value: string }) {
  return (
    <QRCodeSVG
      value={value}
      size={256}
      level="M"           // L | M | Q | H
      includeMargin={true}
    />
  );
}

Scanning Reliability Tips

• Quiet zone: QR codes require a blank border (quiet zone) of at least 4 modules on all sides. Most generators add this automatically — don't crop it.
• Contrast: Black on white is most reliable. Dark colors on light colors generally work. Avoid low-contrast combinations (gray on white, dark blue on black).
• Logo overlays: If adding a logo, use error correction level H. The logo should cover no more than 30% of the code area to stay within the recovery capacity.
• Minimum size in print: Keep modules at least 0.25mm. For a typical v5 code, that's roughly 1cm × 1cm minimum.
• Inverted colors: White-on-black works on some scanners but not all. Stick to dark-on-light for maximum compatibility.
• Test before printing: Always scan your generated code with multiple devices (Android and iOS) before printing at scale.

Quick Reference

Generate QR codes for all these use cases directly in your browser with the QR Code Generator — no server, no data leaving your machine.