Logos

Add brand logos to QR codes while maintaining scannability.

Basic Logo

import { QRCode } from 'qrdx';

<QRCode
  value="https://example.com"
  size={512}
  hideLogo={false}
  logo="https://example.com/logo.png"
  level="Q"
/>

Always use higher error correction (Q or H) with logos.

Advanced Control

import { QRCodeCanvas } from 'qrdx';

<QRCodeCanvas
  value="https://example.com"
  size={512}
  imageSettings={{
    src: "https://example.com/logo.png",
    height: 80,
    width: 80,
    excavate: true,
    x: 216,
    y: 216,
    opacity: 0.9
  }}
  level="Q"
/>

Size Guidelines

• 256px QR: 32-48px logo
• 512px QR: 64-96px logo
• 1024px QR: 128-192px logo

Keep logos between 10-30% of QR code size.

Logo Excavation

What It Does

Excavation removes QR modules under the logo for better scanning.

<QRCodeCanvas
  value="https://example.com"
  size={512}
  imageSettings={{
    src: "/logo.png",
    height: 80,
    width: 80,
    excavate: true  // Recommended for most logos
  }}
/>

Clear space and error correction

padding (in the same pixels as width and height) clears extra modules around the logo, so its edges never touch the code. autoLevel raises error correction to H whenever the cleared area covers more than 7% of the code, so a bigger logo stays readable; it is off by default, so existing codes keep their level.

<QRCodeSVG
  value="https://example.com"
  size={512}
  autoLevel
  imageSettings={{ src: "/logo.png", height: 110, width: 110, excavate: true, padding: 8 }}
/>

The logo keeps its pixel size whatever the margin (releases up to 0.0.46 shrank it as the margin grew).

When to Use

• ✅ Logos with solid backgrounds
• ✅ Logos that might interfere with scanning
• ❌ Transparent logos (optional)
• ⚠️ Always test scanning on real devices

Logo Formats

• PNG — Best for transparency
• JPG — Good for photos
• SVG — Scalable but may have loading issues
• WebP — Modern format, good compression

Center Calculation

const qrSize = 512;
const logoSize = 80;
const position = {
  x: (qrSize - logoSize) / 2,  // 216
  y: (qrSize - logoSize) / 2   // 216
};

Best Practices

1. Use PNG format with transparency
2. Enable excavation for solid logos
3. Use Q or H error correction
4. Keep logo size reasonable (10-30%)
5. Test scanning on target devices

Next Steps

• Downloads — Export QR codes with logos
• Templates — Combine logos with templates
• Colors & Gradients — Style logos with colors