How to Add a Logo to QR Codes

Adding a logo to your QR codes makes them more recognizable and trustworthy. People are more likely to scan a branded QR code because it looks professional and legitimate.

Why QR Codes With Logos Work

QR codes have built-in error correction, which means they can still be scanned even if part of the code is obscured. This is what makes logo overlays possible—we use that error correction capacity to place your logo in the center.

Generate a QR Code With Logo

Use the logoUrl parameter to add a logo to your QR code:

const response = await fetch('https://www.qrcodeapi.io/api/generate', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    data: 'https://yourwebsite.com',
    size: 400,
    format: 'png',
    logoUrl: 'https://yourwebsite.com/logo.png',
    logoSize: 0.25,  // Logo takes up 25% of QR code width
    errorCorrection: 'H'  // High error correction for logo support
  })
});

const qrCodeBlob = await response.blob();

Logo Options

• logoUrl - URL to your logo image (PNG, JPG, or SVG)
• logoSize - Logo size as a percentage of QR code width (0.15 to 0.30, default 0.20)
• logoPadding - White space around the logo in pixels (default: 4)
• logoBackgroundColor - Background color behind the logo (default: white)

Logo Best Practices

Recommended Logo Specifications

• Format: PNG with transparent background works best
• Size: At least 100x100 pixels for quality
• Shape: Square logos work best; round logos work but waste space
• Colors: Simple, high-contrast logos are most visible

What to Avoid

• Logos larger than 30% of the QR code—they can prevent scanning
• Complex or detailed logos—they become illegible at small sizes
• Logos with colors similar to the QR code—reduces contrast
• Low-resolution logos—they look pixelated when scaled

Testing Your Branded QR Code

Always test your QR codes before printing:

1. Scan with multiple devices (iPhone, Android)
2. Test different scanning apps (Camera app, QR scanner apps)
3. Print a test at the intended size
4. Test in different lighting conditions

const brandedQR = await fetch('https://www.qrcodeapi.io/api/generate', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    data: 'https://yourwebsite.com/menu',
    size: 500,
    format: 'png',
    color: '#1a365d',           // Brand navy blue
    background: '#ffffff',
    logoUrl: 'https://yourwebsite.com/logo.png',
    logoSize: 0.22,
    logoPadding: 6,
    logoBackgroundColor: '#ffffff',
    errorCorrection: 'H',
    margin: 2
  })
});