Skip to main content
Generador QR Pro provides comprehensive quality settings to ensure your QR codes work perfectly in any situation, from business cards to billboards.

​
Error correction levels

QR codes use Reed-Solomon error correction to remain scannable even when partially damaged or obscured. The application offers four levels: 
const [level, setLevel] = useState('H');

L - Normal

Recovery: ~7% of data
Use case: Clean, controlled environments
Density: Maximum data capacity

M - Good

Recovery: ~15% of data
Use case: General purpose applications
Density: Balanced capacity and resilience

Q - High

Recovery: ~25% of data
Use case: Outdoor use or rough surfaces
Density: Lower capacity, higher reliability

H - Maximum

Recovery: ~30% of data
Use case: Logos, damaged surfaces
Density: Lowest capacity, maximum resilience

​
Quality selector interface

The quality dropdown provides clear labels for each level: 
<div className="form-group">
  <label className="form-label">Calidad</label>
  <select value={level} onChange={(e) => setLevel(e.target.value)}>
    <option value="L">Normal</option>
    <option value="M">Buena</option>
    <option value="Q">Alta</option>
    <option value="H">Máxima (Logo)</option>
  </select>
</div>
The “Máxima (Logo)” label indicates that level ‘H’ is required when using logos. The application automatically enforces this.

​
How error correction affects scannability

Error correction creates redundancy in the QR code data:
1

Data encoding

Your content is encoded into the QR code pattern
2

Redundant data added

Additional error correction codewords are calculated and added
3

Module allocation

Higher error correction requires more modules (black/white squares)
4

Damage tolerance

Scanners can reconstruct damaged or missing data using the redundant information

​
Practical implications

Higher error correction levels require more space in the QR code. This means either:
  • More dense patterns for the same size QR code
  • Larger QR codes for the same data density
As error correction increases, the amount of user data that fits in a QR code decreases:
  • Level L: Maximum ~2,953 alphanumeric characters
  • Level H: Maximum ~1,852 alphanumeric characters
Higher levels handle:
  • Dirt, scratches, or damage
  • Poor printing quality
  • Glare or shadows
  • Partial obstruction (like logos)
  • Camera focus issues

​
Size setting

The QR code size determines the dimensions in pixels: 
const [size, setSize] = useState(280);

Default size

Value: 280 pixels
Display: Optimal for on-screen viewing
Print: Good for business cards and flyers

Applied to rendering

SVG preview: 280px × 280px
PNG export: 560px × 560px (2× resolution)
Logo size: 62px × 62px (22% of 280px)

​
Size implementation

Size is passed directly to both rendering components: 
<QRCodeSVG
  value={qrValue}
  size={size}  // 280px for preview
  level={logoUrl ? 'H' : level}
  // ...
/>

<QRCodeCanvas
  value={qrValue}
  size={size * 2}  // 560px for high-res export
  level={logoUrl ? 'H' : level}
  // ...
/>
The PNG export uses double the size (560px) to provide high-resolution output suitable for printing.

​
includeMargin setting

The margin (quiet zone) around the QR code is essential for reliable scanning: 
<QRCodeSVG
  value={qrValue}
  size={size}
  level={logoUrl ? 'H' : level}
  bgColor={bgColor === 'transparent' ? '#ffffff' : bgColor}
  fgColor={fgColor}
  includeMargin={true}  // Always enabled
  // ...
/>

​
Why margins matter

QR codes without adequate margins may fail to scan because scanners can’t determine where the code starts and ends.
1

Scanner detection

Scanners identify QR codes by finding the three position markers (corner squares)
2

Boundary definition

The quiet zone defines the QR code’s boundaries, separating it from surrounding content
3

Standard compliance

The QR code specification requires a minimum 4-module wide white border
4

Reliable reading

Margins prevent interference from nearby text, images, or other QR codes
The application always sets includeMargin={true} to ensure compliance with QR code standards and maximum scannability.

​
When to use each quality level

Choose your error correction level based on the deployment scenario:

​
Level L (Normal)

Best for:

  • Digital displays only (websites, apps)
  • Clean, controlled environments
  • Maximum data capacity needed
  • High-quality printing on smooth surfaces

​
Level M (Good)

Best for:

  • General purpose applications
  • Indoor printed materials
  • Business documents
  • Standard marketing materials

​
Level Q (High)

Best for:

  • Outdoor signage
  • Rough or textured surfaces
  • Long-term displays subject to wear
  • Environments with variable lighting

​
Level H (Maximum)

Best for:

  • QR codes with logos (required)
  • Industrial applications
  • Harsh environments
  • Small print sizes
  • When maximum reliability is critical
Start with level H (the default) for most applications. It provides excellent reliability with minimal trade-offs for typical use cases.

​
Automatic quality enforcement

The application intelligently manages quality settings: 
level={logoUrl ? 'H' : level}
When you add a logo, the error correction level automatically switches to ‘H’, regardless of your manual selection. This ensures:
  • Logo area (22%) fits within error correction tolerance (30%)
  • QR code remains scannable with logo present
  • Consistent behavior across all export formats
  • No user intervention required
If you remove the logo, the error correction level returns to your manually selected value. Always verify your quality setting after removing logos.

​
Quality and file size

Error correction level affects export file sizes:

SVG exports

Higher levels create more complex patterns with more vector paths, slightly increasing file size

PNG exports

More complex patterns may compress differently, but the effect is minimal for typical QR codes
The difference is usually negligible compared to the benefits of improved scannability.

Build docs developers (and LLMs) love

Get started for freeTalk to us