Skip to main content
Generador QR Pro allows you to embed a logo in the center of your QR codes, creating branded QR codes that remain fully scannable.

​
Logo upload functionality

The application provides a simple file upload interface for adding logos: 
const [logoUrl, setLogoUrl] = useState('');

const handleLogoUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => setLogoUrl(event.target.result);
    reader.readAsDataURL(file);
  }
};
1

Click upload button

Select the “Subir Imagen” (Upload Image) button in the Logo Central section
2

Choose image file

Browse and select an image file from your device
3

Automatic processing

The image is read as a Data URL and immediately embedded in the QR code
4

Preview and export

Your logo appears centered in the QR code preview and will be included in all exports

​
Upload interface

The logo upload section includes both upload and remove functionality: 
<div className="form-group">
  <label className="form-label">Logo Central</label>
  <div className="file-upload-wrapper">
    <label className="btn btn-secondary upload-btn">
      <ImageIcon size={16} /> Subir Imagen
      <input type="file" accept="image/*" onChange={handleLogoUpload} style={{ display: 'none' }} />
    </label>
    {logoUrl && (
      <button className="btn-icon" onClick={() => setLogoUrl('')} title="Quitar logo">
        <Trash2 size={16} color="var(--error-color)" />
      </button>
    )}
  </div>
</div>
The remove button (trash icon) only appears when a logo is currently loaded, providing a clean interface.

​
Logo size and positioning

Logos are automatically sized and centered within the QR code: 
imageSettings={logoUrl ? {
  src: logoUrl,
  x: undefined,
  y: undefined,
  height: size * 0.22, // 22% of QR code size
  width: size * 0.22,
  excavate: true,
} : undefined}

Logo dimensions

Size: 22% of the total QR code size
Width and height: Equal (square aspect ratio)
For 280px QR: Logo is approximately 62px × 62px

Positioning

Horizontal: Centered (x: undefined)
Vertical: Centered (y: undefined)
Automatic: No manual positioning needed

​
Excavate feature

The excavate: true setting is critical for logo integration:
The excavate feature removes the QR code pattern behind the logo, creating a clean space. This prevents the QR pattern from showing through or interfering with the logo image.
Without excavation, the QR code modules would overlap with the logo, creating visual noise and potentially affecting scannability. Excavation ensures a professional appearance.
The qrcode.react library handles excavation automatically when excavate: true is set, calculating which modules to remove based on the logo position and size.
Excavating the QR pattern removes data-bearing modules. This is why error correction level ‘H’ is required when using logos.

​
Error correction level enforcement

When a logo is present, the error correction level is automatically set to ‘H’ (maximum): 
<QRCodeSVG
  value={qrValue}
  size={size}
  level={logoUrl ? 'H' : level} // Force H if logo present
  // ...
/>

​
Why level ‘H’ is required

1

Data redundancy

Error correction level ‘H’ provides 30% redundancy, allowing up to 30% of the QR code to be damaged or obscured
2

Logo coverage

The 22% logo size fits within the 30% tolerance, ensuring the QR code remains scannable
3

Automatic enforcement

The application automatically switches to level ‘H’ when you add a logo, regardless of your quality setting
4

Safety margin

The 8% buffer (30% tolerance - 22% logo) provides extra resilience for scanning errors
Even though the quality selector shows your chosen level, the actual generated QR code uses level ‘H’ when a logo is present. This is shown in the quality selector label: “Máxima (Logo)”.

​
Supported image formats

The file input accepts all image formats: 
<input type="file" accept="image/*" onChange={handleLogoUpload} style={{ display: 'none' }} />
Common supported formats include:
  • PNG - Best for logos with transparency
  • JPEG/JPG - Good for photographic logos
  • SVG - Vector logos (converted to raster in QR code)
  • GIF - Supported, but static frame only
  • WebP - Modern format with good compression
Logos with transparent backgrounds work best, allowing the QR code background color to show through.

​
High-resolution export

Logos are included in both PNG and SVG exports:

​
PNG export (2× resolution)

<QRCodeCanvas
  value={qrValue}
  size={size * 2} // High resolution for PNG
  level={logoUrl ? 'H' : level}
  bgColor={bgColor}
  fgColor={fgColor}
  includeMargin={true}
  imageSettings={logoUrl ? {
    src: logoUrl, 
    height: (size * 2) * 0.22, 
    width: (size * 2) * 0.22, 
    excavate: true,
  } : undefined}
/>
The logo is scaled proportionally for the high-resolution canvas (560px QR code results in ~123px logo).

​
SVG export (vector format)

The SVG export embeds the logo as an image element within the vector graphic, maintaining the 22% size ratio.

​
Logo best practices

Simple designs

Use logos with clear, simple designs that remain recognizable at small sizes

High contrast

Ensure your logo has good contrast with the QR code background

Square aspect ratio

Square or nearly-square logos work best in the circular center space

Test scanning

Always test QR codes with logos on multiple devices before production use
Overly complex or detailed logos may not display well at the 22% size. Consider using a simplified version of your logo for QR codes.

Build docs developers (and LLMs) love

Get started for freeTalk to us