QR Code Generator
Generate QR codes for any content type with full control over style, error correction, and export format. All processing is 100% client-side.
Use H error correction when embedding a logo to ensure reliable scanning.
What Are QR Codes?
QR (Quick Response) codes are two-dimensional matrix barcodes invented in 1994 by Denso Wave, a Toyota subsidiary, to track automotive parts during manufacturing. Unlike traditional one-dimensional barcodes that store data only horizontally, QR codes store data in both horizontal and vertical directions, allowing them to hold significantly more information - up to 4,296 alphanumeric characters or 7,089 numeric digits in a single symbol.
Modern smartphones can decode a QR code in milliseconds using their camera, making them the dominant encoding standard for bridging physical and digital experiences: restaurant menus, event tickets, payment flows, product packaging, and contactless sharing all rely on QR codes daily.
Content Types Explained
URL
The simplest and most common type. Encodes a full URL that the camera app opens directly. Always include the scheme (https://) so the device recognises it as a link without ambiguity.
Wi-Fi Credentials
Uses the WIFI: URI scheme (e.g., WIFI:T:WPA;S:MyNet;P:pass;;). When scanned, iOS 11+ and Android 9+ offer a one-tap "Join Network" prompt - no typing required. Ideal for cafes, hotels, and conference rooms.
vCard Contact
Encodes a full vCard 3.0 record so the recipient can add your name, phone, email, organisation, and address to their address book with a single tap. Widely supported across all major operating systems.
Generates a mailto: URI pre-filled with recipient address, subject line, and body text. Scanning opens the default mail client with the compose screen ready - useful for feedback forms and support flows.
SMS
Uses the SMSTO: scheme to pre-fill a text message to a specific number. Perfect for customer service shortcuts, promotional opt-ins, or event RSVPs without requiring app downloads.
Custom Payload
Enter any raw string as the payload. Use this for proprietary URI schemes (e.g., myapp://action?id=123), NFC-style records, deep links, or any format not covered by the standard types above.
Error Correction Levels
QR codes include Reed-Solomon error correction data that allows them to be decoded even when partially damaged, obscured, or dirty. Higher correction levels increase resilience but also increase the QR code's data density, making it visually busier. Choose the level that matches your use case:
Maximum data capacity. Best for clean, digital-only environments where QR codes are never printed.
The recommended default. Handles minor wear and small obstructions while keeping code density manageable.
Good for printed QR codes that may get scratched, folded, or partially covered by a sticker or logo.
Required when embedding a logo in the centre of the QR code. The logo covers data modules that error correction recovers.
Designing Scannable QR Codes
Styling QR codes is a balance between aesthetic expression and scan reliability. Every customisation that reduces contrast or obscures finder patterns increases the chance of a failed scan. These guidelines help you stay safely within scannable territory:
Contrast Ratio
Maintain at least a 4:1 contrast ratio between foreground (dots) and background. Black on white is ideal. Avoid light-on-light combinations like yellow on white or grey on grey.
Quiet Zone
The QR spec requires a margin of at least 4 module widths around all four sides. This "quiet zone" prevents the scanner from confusing the finder patterns with adjacent content.
Minimum Print Size
For reliable scanning, print QR codes at a minimum of 2 x 2 cm (about 0.8 x 0.8 in). Smaller codes work for close scanning but fail at typical reading distances of 20-30 cm.
Logo Safe Area
When embedding a logo, keep it within 30-35% of the total code area and always use H (High) error correction. Logos covering more than 35% of the code will cause decoding failures on strict decoders.
QR Art: Dot Shapes and Corner Styles
The dot and corner style options change how data modules and finder patterns are rendered while preserving the underlying QR code matrix. Rounded and dot styles soften the appearance for lifestyle branding; classy and classy-rounded styles add angular elegance suited to luxury or technical brands.
Gradient fills are applied as a single linear or radial gradient across the entire dot layer, creating cohesive colour transitions without breaking scannability. Because gradients maintain contrast across the full range - provided both colour stops differ sufficiently from the background - they are safe for print and digital use.
All styling is performed client-side using the qr-code-styling library, which renders to HTML Canvas and can export lossless SVG. No image data is transmitted to any server at any point.