---
title: "How to Generate Branded QR Code Images"
description: "Generate branded QR code images. Multi-language code, contrast requirements and scanner-friendly sizing."
url: "https://html2img.com/docs/examples/qr-code/"
---

# 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.

> **Note**
>
> If the QR code is the focal point of a wider design, look at the [Event ticket template](https://html2img.com/templates/event-ticket/) and the [Coupon and voucher template](https://html2img.com/templates/coupon-voucher/). Both expose a QR code field and ship with a tested layout, so you skip the markup and SDK entirely.

## HTML Content

```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>
```

## CSS Styles

```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;
}
```

## API Request

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

```json
{
    "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}"
}
```

> **Note**
>
> Update the QR code content by changing the `text` parameter in the QRCode initialisation.

## How it Works

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

> **Warning**
>
> 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

```javascript
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

```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

```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](https://html2img.com/docs/parameters/wait_for_selector/) targeting the canvas plus a small [ms_delay](https://html2img.com/docs/parameters/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.

## See also

- [JavaScript integration guide](https://html2img.com/integrations/javascript/), [Python integration guide](https://html2img.com/integrations/python/)
- [html parameter](https://html2img.com/docs/parameters/html/), [wait_for_selector parameter](https://html2img.com/docs/parameters/wait_for_selector/), [ms_delay parameter](https://html2img.com/docs/parameters/ms_delay/)

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Generate Branded QR Code Images",
  "step": [
    { "@type": "HowToStep", "name": "Build the QR markup", "text": "Include QRCode.js, define a target element, and render the QR code with your colours and logo." },
    { "@type": "HowToStep", "name": "POST to the API", "text": "Send HTML and CSS to the HTML to Image HTML endpoint with wait_for_selector and ms_delay set." },
    { "@type": "HowToStep", "name": "Use the URL", "text": "Embed the i.html2img.com URL on your business card or share screen." }
  ]
})}></script>