QR Code with Logo

Benefits of Logo QR Codes

Logo Requirements

• Format: PNG with transparent background (preferred)
• Size: Maximum 20-25% of QR code width
• Shape: Square or circular logos work best
• Color: High contrast with QR code background
• Resolution: Minimum 300px for print, 100px for web

Implementation Guide

Step 1: Generate Base QR

import qrcode
from PIL import Image

# Generate QR code with HIGH error correction
qr = qrcode.QRCode(
    version=1,
    error_correction=qrcode.constants.ERROR_CORRECT_H,
    box_size=10,
    border=2,
)
qr.add_data('https://example.com')
qr.make(fit=True)

# Create image
qr_img = qr.make_image(fill_color='black', back_color='white').convert('RGB')

Step 2: Overlay Logo

from PIL import Image

# Open logo
logo = Image.open('logo.png').convert('RGBA')

# Calculate logo size (20% of QR)
qr_width = qr_img.size[0]
logo_size = int(qr_width * 0.2)
logo = logo.resize((logo_size, logo_size))

# Create white background for logo
logo_bg = Image.new('RGB', (logo_size, logo_size), 'white')
logo_bg.paste(logo, (0, 0), logo)

# Position logo in center
logo_pos = ((qr_width - logo_size) // 2, (qr_width - logo_size) // 2)

# Paste logo onto QR
qr_img.paste(logo_bg, logo_pos)

# Save
qr_img.save('qr_with_logo.png')

JavaScript Method

function addLogoToQR(canvasElement, logoUrl) {
    const canvas = canvasElement;
    const ctx = canvas.getContext('2d');
    
    const logoImg = new Image();
    logoImg.onload = function() {
        const logoSize = canvas.width * 0.2;
        const logoX = (canvas.width - logoSize) / 2;
        const logoY = (canvas.height - logoSize) / 2;
        
        // White background
        ctx.fillStyle = 'white';
        ctx.fillRect(logoX - 5, logoY - 5, logoSize + 10, logoSize + 10);
        
        // Logo
        ctx.drawImage(logoImg, logoX, logoY, logoSize, logoSize);
    };
    logoImg.src = logoUrl;
}

Design Best Practices

• White Background: Always add white background behind logo
• Test Scannability: Verify with multiple QR reader apps before use
• Logo Contrast: Ensure logo stands out against white background
• Keep Logo Simple: Avoid complex details; simple logos scan better
• Center Positioning: Logo should always be centered on QR
• Maintain Quality: Use high-quality logo image

Common Issues & Solutions

Q: Logo is too large, QR won't scan

A: Reduce logo to 15% instead of 25%. Use higher error correction level. Test with real QR readers.

Q: Logo needs a colored background

A: Use a light, high-contrast background color instead of white. Avoid dark backgrounds.

Q: Can I use transparent background for logo?

A: Yes, but add white background layer behind for contrast. Transparent logos over QR pattern won't work.

Q: For printing, what DPI should the logo be?

A: 300 DPI minimum. Generate full-size QR code (2-3 inches), then add proportional logo.

Create QR Codes with Your Logo