How to Generate Branded QR Code Images

Render a branded QR code as a PNG using QRCode.js inside an HTML payload. Useful for business cards, promotional materials and contact-share screens.

If the QR code is the focal point of a wider design, look at the Event ticket template and the Coupon and voucher template. Both expose a QR code field and ship with a tested layout, so you skip the markup and SDK entirely.

HTML Content

<div class="qr-container">
    <div class="qr-code" id="qrcode"></div>
    <div class="qr-label">Scan to visit our website</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
    new QRCode(document.getElementById("qrcode"), {
        text: "https://html2img.com",
        width: 200,
        height: 200,
        colorDark: "#2563eb",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
</script>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.qr-container {
    width: 280px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.qr-code {
    display: inline-block;
    padding: 8px;
    background: white;
    border-radius: 8px;
}

.qr-code img {
    display: block;
}

.qr-label {
    margin-top: 16px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"qr-container\"><div class=\"qr-code\" id=\"qrcode\"></div><div class=\"qr-label\">Scan to visit our website</div></div><script src=\"https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js\"></script><script>new QRCode(document.getElementById(\"qrcode\"), {text: \"https://html2img.com\",width: 200,height: 200,colorDark: \"#2563eb\",colorLight: \"#ffffff\",correctLevel: QRCode.CorrectLevel.H});</script>",
    "width": 375,
    "height": 350,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.qr-container{width:280px;padding:24px;background:white;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1);text-align:center}.qr-code{display:inline-block;padding:8px;background:white;border-radius:8px}.qr-code img{display:block}.qr-label{margin-top:16px;color:#4b5563;font-size:14px;font-weight:500}"
}

Update the QR code content by changing the text parameter in the QRCode initialisation.

How it Works

Uses QRCode.js library to generate QR codes
Customisable colours and error correction levels
Clean container design with subtle shadow
Responsive and centered layout

Use wait_for_selector: '#qrcode canvas' so capture waits until the QR code has drawn, plus a small ms_delay if needed.

Customisation Options

colorDark: QR code foreground colour
correctLevel: Error correction level (L, M, Q, H)
width/height: QR code dimensions
Add a logo by absolutely positioning an <img> over the centre of the QR container, and keep correctLevel: QRCode.CorrectLevel.H so the covered modules stay recoverable

Code in other languages

Node.js

const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: qrHtml, css: qrCss, width: 375, height: 350, wait_for_selector: '#qrcode canvas', ms_delay: 300 }),
});
const { url } = await response.json();

Python

import os, requests
response = requests.post(
    'https://app.html2img.com/api/html',
    headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
    json={'html': qr_html, 'css': qr_css, 'width': 375, 'height': 350, 'wait_for_selector': '#qrcode canvas', 'ms_delay': 300},
)
url = response.json()['url']

PHP

$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => json_encode(['html' => $qrHtml, 'css' => $qrCss, 'width' => 375, 'height' => 350, 'wait_for_selector' => '#qrcode canvas', 'ms_delay' => 300]),
]);
$url = json_decode(curl_exec($ch), true)['url'];

Common pitfalls

QR code captured before render. QRCode.js paints to a canvas asynchronously. Use wait_for_selector targeting the canvas plus a small ms_delay.
Logo overlap breaks scanning. Keep logo overlay area under 20 percent of the QR area and use correctLevel: QRCode.CorrectLevel.H for high error correction.
Colour contrast too low. Foreground and background colours need at least a 4.5:1 contrast ratio for reliable scanning.