JavaScript QR Code Generator With Logo (Code Examples + Best Practices)

Adding a logo to a QR code sounds simple, but it changes the implementation details in ways that matter for scan reliability. A plain QR code can often get away with small styling mistakes, while a QR code with a centered logo needs stronger error correction, tighter spacing rules, and better download output. If you want a ready-made starting point, try our QR Code Generator tool.

Why a Logo Changes QR Code Generation

When you place a logo in the middle of a QR code, you are intentionally covering some of the encoded modules. That only works because QR codes support error correction. In practice, this means you should usually switch to a higher correction level such as H, keep the logo relatively small, and test the final image with real devices instead of trusting the preview alone.

A good rule of thumb is to keep the logo footprint conservative and make sure there is enough white space around it. The QR code still needs clear positioning patterns in the corners and enough untouched modules for scanners to reconstruct the hidden data.

Basic Browser Flow

A typical browser implementation has four steps: generate the QR code, render it into canvas or SVG, load the logo image, then draw the logo over the center of the QR code. Using canvas is usually the easiest option when you want to export a final PNG with the logo already composited.

import QRCode from "qrcode";

async function renderQrWithLogo({ canvas, text, logoUrl }) {
  const size = 320;
  const context = canvas.getContext("2d");

  await QRCode.toCanvas(canvas, text, {
    width: size,
    margin: 2,
    errorCorrectionLevel: "H",
  });

  const logo = new Image();
  logo.crossOrigin = "anonymous";
  logo.src = logoUrl;

  await new Promise((resolve, reject) => {
    logo.onload = resolve;
    logo.onerror = reject;
  });

  const logoSize = Math.floor(size * 0.22);
  const logoX = (size - logoSize) / 2;
  const logoY = (size - logoSize) / 2;

  context.fillStyle = "#ffffff";
  context.fillRect(logoX - 12, logoY - 12, logoSize + 24, logoSize + 24);
  context.drawImage(logo, logoX, logoY, logoSize, logoSize);
}

This pattern gives you a practical baseline: generate the QR with `errorCorrectionLevel: 'H'`, add a white backing plate behind the logo, and keep the logo around 18% to 24% of the total width. Larger overlays can work, but you should validate them on multiple devices before shipping.

React Example

In React you can wrap the same logic in an effect that reruns whenever the text or uploaded logo changes. That keeps the preview responsive and makes it easy to add controls for logo size, dark/light colors, or output dimensions.

import { useEffect, useRef } from "react";
import QRCode from "qrcode";

export function QrWithLogo({ value, logoUrl }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current || !value || !logoUrl) {
      return;
    }

    renderQrWithLogo({
      canvas: canvasRef.current,
      text: value,
      logoUrl,
    });
  }, [value, logoUrl]);

  return <canvas ref={canvasRef} width={320} height={320} />;
}

If your product needs more polish, add input validation, image size limits, drag-and-drop upload, and a way to reset to a plain QR code. Those small UX touches often matter more than the generation logic itself.

Safe Defaults for Logo QR Codes

If you are building a JavaScript QR code generator with logo support, the safest defaults are: high error correction, a moderate logo size, strong contrast, and image export after the final preview is approved. SVG works well for flexible display, while PNG is usually the most convenient export format for users who want a finished asset.

You should also test common payloads separately. A short URL may still scan with a large logo, while long WiFi credentials or dense contact cards can become much more fragile. This is one reason to keep the user in an interactive tool instead of relying on a purely static code sample.

When to Use a Dedicated Tool Instead of a Tutorial

The keyword "JavaScript QR code generator with logo" often has strong tool intent: people do not just want to read about the technique, they want to use it. That is why the best workflow is usually a hybrid one: a real QR Code Generator for immediate use, plus a supporting article like this one for developers who want to understand the implementation details and adapt the code for their own projects.

Conclusion

If you want to skip the setup and experiment directly, use the JavaScript QR Code Generator on jsgenerator.com. It is the main entry point for QR code workflows on this site, and this article is designed to support that tool with implementation details, code samples, and practical defaults for logo overlays.