QR Code Generator

How QR Codes Work

QR (Quick Response) codes store data in a two-dimensional grid of black and white modules. When your phone camera scans the pattern, it decodes the data, usually a URL, but it can be text, WiFi credentials, contact details, or any string of characters.

Think of a QR code like a very efficient barcode that works in two dimensions instead of one. A traditional barcode reads left-to-right and holds maybe 20 characters. A QR code reads both horizontally and vertically, packing thousands of characters into a small square. The three large squares in the corners are finder patterns, they tell the scanner which way the code is oriented, so it works even if you scan it upside down or at an angle.

QR codes use Reed-Solomon error correction, which means they still work even if part of the code is damaged or obscured. At the highest level (Level H), up to 30% of the code can be covered, which is why you can put a logo in the centre and it still scans. This is the same error correction technology used in satellite communications and Blu-ray discs.

Everything runs in your browser. The QR code is generated client-side using the qrcode.react library. Your data is never sent to any server, which matters when you're generating codes with WiFi passwords, contact details, or private URLs.

Static vs Dynamic QR Codes

This is the single most important decision you'll make when creating a QR code, and most people get it wrong.

The workaround: You can get most benefits of dynamic codes for free. Generate a static QR code pointing to a URL you control (your own website or a link shortener). When you need to change the destination, update the redirect on your server, the QR code stays the same. You won't get scan analytics, but you won't pay a monthly fee either.

Error Correction Levels

Higher error correction means a denser (larger) QR code because extra data modules are added for redundancy. If you're embedding a logo in the centre, use Level H, you're deliberately covering part of the code, so you need maximum recovery. For a clean digital code on a screen, Level L keeps things small and simple.

Data Capacity

A standard QR code can hold a surprising amount of data, but size matters, more data means a denser, harder-to-scan code:

Practical limit: Keep your data under 200-300 characters for codes that scan reliably at normal print sizes. A typical URL (50-80 characters) is well within range. Long data produces codes with tiny modules that need a high-res print to scan. If your content is longer than 300 characters, consider hosting it on a webpage and encoding the URL instead.

QR Code Data Formats

QR codes aren't just for URLs. Your phone recognises specific data formats and takes action automatically, connecting to WiFi, saving a contact, or opening your email app. Here's every format you can use:

Pro tip: WiFi and vCard formats are the most underused. A WiFi QR code eliminates the "what's the password?" conversation entirely, and a vCard code means your contact details are saved correctly every time, no typos, no missing digits.

Print Size & Scanning Distance Guide

The number one reason QR codes fail in the real world isn't the code itself, it's the print size. A code that scans perfectly on your laptop screen might be useless on a poster across the room. Use this guide to pick the right size for your use case.

Rule of thumb: The minimum QR code size should be 1/10th of the expected scanning distance. If people will scan from 1 metre away, make the code at least 10 cm wide. If they're scanning from 15 cm (phone held over a business card), 15 mm is enough.

Industry Use Cases & Tips

Every industry uses QR codes differently. Search for your industry to find specific use cases, recommended settings, and tips from people who've done it before.

Showing 24 of 24 use cases.

Worked Example: Coffee Shop WiFi & Review Cards

Colour & Design Best Practices

You can customise QR code colours, but there are real technical constraints. Get these wrong and your beautifully branded code won't scan.

Logo placement: If you're adding a logo to the centre, keep it within 20% of the total code area and use Level H error correction. The logo covers data modules, error correction recreates them, but only up to a point. A logo that's too large will break the code silently (it generates fine but won't scan).

Printing Tips

• Minimum print size: 2 cm × 2 cm for close-range scanning (menus, cards). 10 cm × 10 cm for posters scanned from 1-2 metres away. See the size guide above for specific scenarios.
• Quiet zone: Leave white space around the code equal to at least 4 modules wide. Crowding the code against other design elements makes scanning unreliable. This white border is part of the QR code specification, not optional decoration.
• Contrast: Dark modules on a light background. The scanner needs clear contrast. Avoid pastel-on-pastel colour schemes. When in doubt, stick with black on white.
• Surface matters: Glossy surfaces create glare under certain lighting. Matt or satin finishes scan more reliably, especially under fluorescent lights. If you must use gloss, test under the lighting conditions where it'll be displayed.
• Test before printing. Always scan the code with at least two different phones (one iOS, one Android) before sending it to print. What looks fine on screen can fail when printed at a different size or on a textured material.
• Download as SVG for print. SVG is vector-based and scales to any size without pixelation. PNG works for digital use, but if you're printing larger than 5 cm, SVG gives you crisp edges at any size.

Common Mistakes

QR Code vs Barcode, When to Use Which

Bottom line: If a person will scan it with their phone, use a QR code. If a machine will scan it at a checkout or warehouse, a barcode is usually the standard. Many products now include both.

Testing & Troubleshooting

Related Tools