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.

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. If your case is in the left column, three ways to ship it:

1. The one-line version

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

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.

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.
Contrast and margins follow the usual rules: dark modules, ≥ 40% luminance difference, 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.

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 to confirm the payload survived URL-encoding intact.

Build the code's URL: make a QR code 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.