Design
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.
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).
The working numbers:
- Canvas: 1200×630 px. Give the code ≥ 300 px plus its own 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 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 at render time. Before shipping,
run the finished 1200×630 export through the validator.
The favicon trick: this one cannot work
Do the arithmetic once and the idea closes itself. The smallest possible QR code, version 1, 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, 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 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: free, no signup
Related
- QR code design best practices: seven rules ranked, The seven design rules that decide whether a styled QR code scans, ranked by how often breaking them kills codes, with the number behind each rule.
- QR codes on a dark-mode website, Dark mode silently turns transparent QR codes into light-on-dark, which many scanners refuse. Give every code an explicit light card that ignores the theme.
- Minimum on-screen duration for a QR code, A primed viewer needs 8–12 seconds to unlock, aim, focus and decode. Show codes for at least 15–20 seconds, or keep them persistent in a corner.
- Module size vs camera resolution, A decoder needs roughly three or more image pixels per module. The arithmetic from sensor to module, and why tiny codes fail on older cameras.