Adding an image — your logo, a product photo, or an icon — to the center of a QR code makes it branded and recognizable. People trust branded QR codes more than plain ones, and they're more likely to scan when they see a familiar logo.
This is possible because QR codes have built-in error correction that compensates for the covered area. Here's how to do it correctly.
How It Works Technically
QR codes use Reed-Solomon error correction, which adds redundant data. At the highest level (H), up to 30% of the QR code can be destroyed or covered and it still scans. The image in the center replaces data modules, and the error correction reconstructs the missing information.
This means the image must cover no more than about 20-25% of the total QR area (leaving a safety margin from the 30% maximum).
Image vs Logo vs Photo
Logo (recommended). A simple icon mark or logomark works best. Clean shapes, solid colors, and enough contrast against the QR modules. Think: the Nike swoosh, an Apple icon, a simple initials mark.
Photo. A photo in the center can work, but it needs high contrast and a clear border to separate it from the QR pattern. Photos with fine detail get lost at small QR sizes.
Icon. A relevant icon (a fork for a restaurant, a heart for a charity, a music note for a playlist) adds context about what the QR does without needing your actual logo.
Step by Step
Method 1: QR generator with image support
Some QR generators let you upload an image during creation. The tool centers the image, adjusts error correction to H, and ensures the QR remains scannable. This is the safest and easiest method. At qree.app, logo insertion is coming soon.
Method 2: Manual overlay in a design tool
Generate your QR code with error correction level H. Download as SVG. Open in Figma, Illustrator, or any design tool. Place your image in the center. Add a white padding border around the image (5-10px). Export and test by scanning.
Image Sizing Guide
For a 300×300 px QR: image should be roughly 70×70 px (max 80×80 px).
For a 600×600 px QR: image should be roughly 140×140 px (max 160×160 px).
For a 1200×1200 px QR: image should be roughly 280×280 px (max 320×320 px).
Always add a white or background-colored border around the image — about 5-10% of the QR width. This creates visual separation and prevents the image pixels from blending with QR modules.
Common Mistakes
Image too large. Covering more than 25-30% breaks the QR. When in doubt, go smaller.
No padding around image. Without a border, the image bleeds into the QR pattern and confuses scanners.
Low error correction. If the QR was generated with error correction L or M, adding an image will likely break it. Always use H when adding images.
Complex/detailed image. A highly detailed logo with thin lines will be invisible at small QR sizes. Use a simplified version.
Not testing. Always scan the final result on multiple phones. A QR that works on your iPhone might fail on an older Android.
Transparent vs Opaque Image Background
Opaque (white background). Safest. The white rectangle clearly separates the image from the QR. Works on any QR color.
Transparent. The image floats over the QR modules. Looks cleaner but riskier — some image pixels may blend with QR modules. Test thoroughly.
Circular mask. A circular crop around the image (common for logos) looks polished. Add a white circle border for separation.
Create Your QR Code with Image
At qree.app, customize QR colors, dot styles, and corners. Logo insertion is coming soon — for now, use the SVG download and add your image in your design tool.