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, generate the images ahead of time and serve them from your own CDN rather than hotlinking any API, the caching strategy covers it.

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.