# QR code favicon and OG image tricks

> A QR code in an Open Graph image works — at the standard 1200×630 px, give the code at least 300 px and it scans from another screen. A QR favicon cannot work: a version 1 code spans 29 modules including quiet zone, and 32 px leaves about one pixel per module, far below what any camera resolves.

Source: https://useqr.app/docs/design/qr-code-favicon-and-og-image-tricks · Last reviewed 2026-08-21 · UseQR is free forever, MIT licensed, no signup.

---

## The OG image trick — this one works

An Open Graph image is the 1200×630 px card that unfurls when a link is shared in chat,
social feeds or Slack. Putting a QR code in it creates a genuinely useful path: the link
preview appears on *someone's screen*, and a second person in the room scans it straight
off that display — meeting-room screens, shared laptops, a colleague's monitor. The
mechanics of screen-to-phone scanning are forgiving at these sizes
([scanning off a monitor](/docs/scanning/scanning-a-qr-code-off-a-monitor)).

The working numbers:

- Canvas: **1200×630 px**. Give the code **≥ 300 px** plus its own
  [quiet zone](/glossary/quiet-zone) — at 300 px a version 2 code has ~12 px modules,
  comfortably above the 3–4 px per module cameras need.
- Compose message left, code right. Some placements crop preview edges to squarer
  ratios, so keep the code away from the extreme edges of the canvas.
- Dark modules on a light panel, even if the card art is dark — the polarity rules from
  [dark-mode pages](/docs/design/qr-code-in-a-dark-mode-website) apply to cards too.

Generating the code for the card is one image tag's worth of work with the direct
endpoint — `https://useqr.app/q/https%3A%2F%2Fexample.com.png` — or the
[keyless API](/docs/developers/free-qr-code-api-no-key) at render time. Before shipping,
run the finished 1200×630 export through the [validator](/validate).

## The favicon trick — this one cannot work

Do the arithmetic once and the idea closes itself. The smallest possible QR code,
[version 1](/glossary/version), is 21 modules across; add the mandatory 4-module quiet
zone each side and the image must carry **29 modules of width**:

| Favicon size | Pixels per module | Verdict |
|---|---|---|
| 16 px | 0.55 | noise |
| 32 px | 1.1 | noise |
| 48 px | 1.7 | still unreadable |
| ~116 px | 4 | the realistic floor |

Decoders need roughly **3–4 camera pixels per module** after all the losses between
screen and sensor — the full chain is worked through in
[module size vs camera resolution](/docs/spec/module-size-vs-camera-resolution) — so a
scannable on-screen code starts around 90–120 px displayed. Favicons render at 16–32 px.
A QR-patterned favicon is therefore a *logo that looks like a QR code*: legitimate as
branding for a QR-related product, but it will never scan, and implying it does is the
kind of dishonesty users remember.

## When the trick is a gimmick

The test is whether a **cross-device jump** actually exists. A QR code earns its pixels
when content sits on one screen and needs to reach a different device — docs page to
phone, meeting screen to attendees' phones. If the person seeing the preview can simply
click the link — which is most social-feed contexts, since they are already on the
destination device — the code is decoration that crowds the card. Design the OG code for
the meeting-room case, keep a clean [URL visible beside it](/docs/design/qr-code-next-to-a-short-url-fallback)
on the card, and skip the QR favicon entirely.

## FAQ

### Can you put a QR code in an Open Graph image?

Yes, and it scans. On the standard 1200×630 px canvas, make the code at least 300 px wide
with its own quiet zone and light background. People scan link previews off meeting
screens and colleagues' monitors more often than you would expect.

### Can a favicon be a working QR code?

No. A version 1 code needs 29 modules of width including the quiet zone, and a 32 px
favicon gives each module about one pixel — far below the 3–4 pixels per module cameras
require. Any QR-shaped favicon is decoration.

### What is the smallest on-screen size a QR code can scan at?

Roughly 90–120 px displayed for a version 1–2 code, which delivers the necessary 3–4
pixels per module to the phone camera at close range. Larger is always safer, especially
across a room.

### Is a QR code in a social preview worth it?

Only when a cross-device jump is real — a preview seen on shared or desktop screens that
people want on their phones. For feeds browsed on the phone itself, the viewer can just
tap the link, and the code spends card space on nothing.

## Try it

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