Mateen Kiani
Published on Thu Jul 10 2025·4 min read
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.
To start, create a fresh Node.js project and install the required packages:
mkdir qr-with-logocd qr-with-logonpm init -ynpm install qrcode jimp
qrcode
package handles QR code generation.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.
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.
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 QRconst qrWidth = qr.bitmap.width;const logoWidth = qrWidth / 4;logo.resize(logoWidth, Jimp.AUTO);// Composite logo in centerconst 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();
Tip: Always use high correction level so scanners can read around the logo.
Choosing the right logo size and position keeps your QR code both attractive and functional:
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 };}
After generating your QR code with a logo, always test with:
If scanning fails:
Tip: Scannability is more important than design flair.
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.
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.