Placing a QR code on real-world packaging and signage
A QR code that scans perfectly on your screen can fail completely once it's printed small on a product box, half-hidden behind a menu's fold, or shrunk down to fit a corner of a poster. Previewing the placement first, at the actual size and position it will be printed, catches these problems before you pay for print.
This mockup placer composites your QR code onto the background at the background image's full resolution, so what you see on screen (scaled down for your browser) matches what actually gets exported and printed.
How small is too small?
A commonly cited rule of thumb is that a QR code should be at least 2 x 2 cm (about 0.8 x 0.8 inches) for close-range scanning (business cards, product labels held in hand), and roughly 1 unit of code width for every 10 of the same units of scanning distance (for example, 1 foot of width at 10 feet) for posters, billboards, and signage viewed from further away. This 10:1 ratio is a planning heuristic, not an ISO minimum or a guarantee. Payload density, printing, lighting, and the scanner matter; test at the intended distance. If you're placing a code on a large product box that will sit on a shelf, size it for the distance a shopper will actually stand from it, not the distance you're viewing your screen from.
Don't skip the quiet zone
Every QR code needs a clear, unobstructed margin around it, the "quiet zone", so a scanner can distinguish where the code starts and ends. When you're placing a code over a busy background (patterned packaging, a photo, a textured wall), keep enough empty space between the code and the surrounding artwork. A code that's technically large enough but crammed right up against text or a logo can still fail to scan.
- Avoid busy backgrounds directly behind the code: place it over a solid-colored area of your product or poster when possible.
- Leave breathing room: don't crop the code right up against an edge, fold, or another design element.
- Check contrast against the surface: a dark QR code on a dark cardboard box or a light code on a light wall can lose enough contrast to fail; see our Contrast Checker before finalizing colors.
Why the download uses the background's full resolution
The on-screen preview here is scaled down to fit your browser window, but every position and size you set is stored as a percentage of the image, not a fixed pixel value. When you download, this tool redraws the QR code onto a full-size copy of your background image at its original resolution, so a high-resolution product photo stays sharp and print-ready and isn't limited to whatever size your screen happened to display it at.
Getting your QR code into this tool
If you just made a QR code with the QR Code Generator, click "Place on a Product, Menu, or Poster" in its download panel; the code is handed off to this page automatically, no download-then-reupload step needed. You can also upload any existing QR code image (PNG, JPG, or SVG) directly here, including one made with a different tool entirely.
Pro tip: test-scan the downloaded mockup
Before sending a design to print, download the composited mockup and try scanning it directly off your screen (or print a test sheet) with two different phones. This catches sizing and contrast problems while they're still free to fix.