Have you ever needed to share a link or piece of data quickly? QR codes are everywhere—from menus to tickets to business cards. But while generating a plain QR code in Node.js is straightforward, adding a logo in the center often trips people up. How do you embed a logo into a Node.js-generated QR code without breaking its scanability?

The good news is that with Node.js, the qrcode library, and an image processor like Jimp, you can generate a crisp, scannable QR code and overlay your brand’s logo right in the center. Understanding how to blend these tools not only makes your app look more professional but also ensures your codes remain easy to scan on any device.

Setup Your Node.js Project

To start, create a fresh Node.js project and install the required packages:

mkdir qr-with-logo
cd qr-with-logo
npm init -y
npm install qrcode jimp

• The qrcode package handles QR code generation.
• Jimp is a pure JavaScript image processor for overlaying logos.

Tip: If you need guidance on project setup in VS Code, refer to creating a Node.js project.

Once installed, create an index.js file to start coding.

Generate a Basic QR Code

Before adding a logo, let’s generate a plain QR code image. In index.js:

const QRCode = require('qrcode');

async function createQR(text) {
  try {
    await QRCode.toFile('qr.png', text, {
      errorCorrectionLevel: 'H',
      width: 300
    });
    console.log('QR code generated.');
  } catch (err) {
    console.error(err);
  }
}

createQR('https://example.com');

Here we set errorCorrectionLevel to H (high) so the code can tolerate up to 30% data loss. That extra redundancy helps when you place a logo on top.

Overlay a Logo with Jimp

Now for the magic: merging your logo into the QR code. Add this to index.js:

const Jimp = require('jimp');

async function addLogo() {
  const qr = await Jimp.read('qr.png');
  const logo = await Jimp.read('logo.png');

  // Resize logo to fit QR
  const qrWidth = qr.bitmap.width;
  const logoWidth = qrWidth / 4;
  logo.resize(logoWidth, Jimp.AUTO);

  // Composite logo in center
  const x = (qrWidth - logoWidth) / 2;
  const y = x;
  qr.composite(logo, x, y, {
    mode: Jimp.BLEND_SOURCE_OVER,
    opacitySource: 1,
    opacityDest: 1
  });

  await qr.writeAsync('qr-with-logo.png');
  console.log('QR with logo created.');
}

addLogo();

1. Read both images with Jimp.
2. Resize the logo to 25% of the QR width.
3. Center the logo and composite it over the QR code.

Tip: Always use high correction level so scanners can read around the logo.

Tweak Size and Positioning

Choosing the right logo size and position keeps your QR code both attractive and functional:

• Size ratio: Keep logos under 30% of the QR area. Larger logos risk unreadability.
• Margins: Maintain a clear quiet zone (white border) of at least four modules around the code.
• Position: Center placement is common, but you can experiment with corners if your design allows.

Consider wrapping these settings in a function for reuse. For example:

function calculateLogoMetrics(qrSize, ratio) {
  const logoSize = qrSize * ratio;
  const offset = (qrSize - logoSize) / 2;
  return { logoSize, offset };
}

Test and Optimize

After generating your QR code with a logo, always test with:

• Multiple smartphone scanners (iOS, Android).
• Varying light conditions and screen sizes.
• Print samples at different scales.

If scanning fails:

• Increase error correction level.
• Decrease logo size or add a border around it.

Tip: Scannability is more important than design flair.

Build a Simple Express Endpoint

Let’s integrate this into an API so clients can request QR codes on the fly:

const express = require('express');
const fs = require('fs');

const app = express();
app.use(express.json());

app.post('/generate-qr', async (req, res) => {
  const { text } = req.body;
  await createQR(text);
  await addLogo();
  const image = fs.readFileSync('qr-with-logo.png');
  res.set('Content-Type', 'image/png');
  res.send(image);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Now any POST to /generate-qr with { "text": "your-data-here" } returns your branded QR.

You can even deploy this for free by following guides on how to deploy Node.js backend, such as deploying Node.js for free.

Conclusion

Generating QR codes with embedded logos in Node.js is easier than you might think. By combining the qrcode library’s high error correction settings with Jimp’s image compositing, you get a reliable, branded QR code that scans smoothly under real-world conditions. Remember to test across devices and adjust logo size to maintain the code’s readability.

With these building blocks—project setup, basic QR generation, logo overlay, and a simple Express endpoint—you have a complete toolkit for adding custom-branded QR codes to your applications. Now it’s your turn: pick your logo, tweak the settings, and bring your QR-based features to life.