# How to add a QR code to a website

> Add an img tag whose src is a UseQR API URL — one line, no file to host. But use it only where a screen-to-phone handoff genuinely helps: continue on mobile, download an app, join WiFi, pay from a desktop page. A QR code standing in for a clickable link on the same screen is noise.

Source: https://useqr.app/docs/how-to/how-to-add-a-qr-code-to-a-website · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## First: does a QR code belong on a screen at all?

A visitor to your website has a working browser one click away from anything you link.
A QR code earns its place on a web page only when the visitor's *phone* needs to end up
somewhere their *current screen* cannot take them:

| Genuinely useful | Pointless |
|---|---|
| **Cross-device handoff** — desktop visitor continues on mobile (login, saved cart, app deep link) | A code linking to another page of the same site |
| **App download** — desktop page, app store destination | A code next to the clickable version of the same link |
| **Payment** — desktop invoice page, phone pays via UPI or bank app | A code on a mobile page (the visitor is already on the phone) |
| **WiFi access page** on a wall-mounted tablet or kiosk | Decoration in the footer |
| **TV and streaming layouts** where nothing is clickable | |

The broader decision logic lives in
[when not to use a QR code](/docs/basics/when-not-to-use-a-qr-code). If your case is in
the left column, three ways to ship it:

## 1. The one-line version

```html
<img src="https://useqr.app/api/v1/qr?data=https://example.com/app&size=300"
     width="150" height="150"
     alt="Scan to get the app on your phone">
```

The API returns the PNG directly — nothing to generate, host or deploy, and the
image URL is stable. Display at **150 px or larger**; phones scan monitors happily at that
size. The deeper markup options — inline SVG with zero external requests, lazy-loading,
caching — are in [embedding a QR code in HTML](/docs/how-to/how-to-embed-a-qr-code-in-html).

## 2. Consider a dynamic payload

Because the code is built from a URL parameter, server-side templates and client-side
JavaScript can generate codes per user or per page — a login-handoff token, the current
page's mobile deep link. Compose the API URL with the encoded payload and set it as the
image source. For high-traffic pages, self-hosting the generation is also reasonable —
the [API is MIT-licensed and self-hostable](/docs/developers/free-qr-code-api-no-key).

## 3. Respect the screen medium

- **Dark mode**: a code served as a dark-on-transparent image disappears on dark themes.
  Serve a solid white background, or handle both themes deliberately — the patterns are in
  [QR codes on dark-mode websites](/docs/design/qr-code-in-a-dark-mode-website).
- **Contrast and margins** follow the usual rules: dark modules, ≥ 40% luminance
  difference, [quiet zone](/glossary/quiet-zone) of 4+ modules that no CSS border or
  background image invades.
- **Don't animate it**, fade it, or put it in a carousel. A code that moves cannot be
  scanned; give it stable pixels.
- **Responsive layouts**: fixed pixel size beats percentage width — a code that shrinks
  to 60 px on tablets is dead weight. Hide it below a sensible breakpoint instead; on
  mobile viewports the code is useless by definition, so swap it for a plain link.

## 4. Always pair with a fallback

Screen readers cannot scan, and neither can the person whose phone is the screen. Put
the equivalent action next to the code as a normal link or short URL, and give the image
meaningful alt text describing the destination, not "QR code" — guidance in
[alt text and screen readers](/docs/design/qr-code-alt-text-and-screen-readers).

## 5. Verify in place

Load the page on a real monitor and scan it with a phone — glare, size and dark-mode
inversion only show up in situ. Then run the rendered code through the
[validator](/validate) to confirm the payload survived URL-encoding intact.

Build the code's URL: [make a QR code](/url?data=https://example.com) and copy the API
link from the result.

## FAQ

### When does a QR code on a website make sense?
When the visitor's phone needs to go where their current screen cannot take them: continue-on-mobile handoffs, app downloads from desktop pages, paying a desktop invoice by phone, kiosk and TV layouts.

### How do I display a QR code on my site without hosting an image?
Use an img tag pointing at a QR API URL such as https://useqr.app/api/v1/qr?data=your-link&size=300. The API returns the PNG directly, keylessly and free.

### Should the QR code show on mobile visitors' screens?
No — a phone cannot scan itself. Hide the code below a mobile breakpoint and show a plain link or button instead.

### What size should an on-screen QR code be?
At least 150 CSS pixels square for arm's-length scanning of a desktop monitor, with its white margin intact. Bigger if the screen is viewed from further away, such as kiosks.

## Try it

- https://useqr.app/url
- https://useqr.app/validate