A QR code with your logo in the center inspires three times more trust than a plain black square. It's the difference between "this could be anything" and "this belongs to this brand". The catch: do it wrong and the scanner fails. Here's how to add the logo properly and verify it still works.
Quick answer
- Yes, you can add a logo to the center of a QR. The key: raise error correction level to the maximum (H) and keep the logo below 25% of total size.
- In QRcito the logo embeds directly in the generator, as SVG or PNG, without touching Photoshop or manual tweaks.
- Level H tolerates up to 30% of visual damage without losing information. That's what lets the center be covered by your logo.
- After generating it, always test on at least two different phones before printing.
- For print and design, download as SVG. For web and social, PNG. For a refresher: PNG vs SVG for QR codes.
Why add a logo to your QR
Human brains read images much faster than text. A "naked" QR is noise: you don't know if it leads to Spotify, a menu, a payment, or a quishing scam. A QR with a logo says "this is from X, scan with confidence".
Three concrete benefits:
- Higher scan rate. Scanova and QRtiger studies in 2024 show a 38–55% increase in scans when QR is branded vs not branded.
- Coherent visual identity. On a poster, flyer, or display, the QR stops being a "foreign body" and becomes part of the design.
- Reduces quishing. If users are used to seeing QR with your brand logo, fraudulent QR codes stuck on top without your logo stand out more. Deep-dive: Quishing: what it is and how to avoid it.
How it works technically
A QR code encodes information with redundancy. There are four error correction levels (ECL):
| Level | Tolerance | Recommended use |
|---|---|---|
| L (Low) | 7% | High-res digital images, no damage |
| M (Medium) | 15% | Default for simple QR without logo |
| Q (Quartile) | 25% | Posters, packaging, detailed QR |
| H (High) | 30% | QR with logo or physical wear |
Covering the center of the QR with a logo is equivalent to "damaging" part of the modules. If you raise correction to H, the reader can still reconstruct the information.
Golden rule: when you add a logo, ECL automatically goes to H. QRcito does this for you as soon as it detects an uploaded image. If your generator doesn't, set it manually.
To truly understand why a QR is so damage-tolerant, see our dedicated guide: QR error correction levels L/M/Q/H explained.
Step-by-step tutorial in QRcito
1. Generate the QR first (without logo)
Before thinking about branding, make sure the QR content works:
- Open qrcito.com.
- Choose the type: URL, WiFi, vCard, event, anything.
- Enter the content and verify the preview QR scans with your phone.
If the base QR doesn't scan without a logo, it won't scan with one either.
2. Upload your logo
In the "Center logo" panel, drag or select your image.
- Preferred format: SVG. If you only have PNG, ensure it's at least 512×512 px with transparent background.
- Aspect ratio: square. If your logo is horizontal or vertical, crop it first or place it inside a square with a white background.
- Weight: < 1 MB. The logo embeds in the resulting SVG.
3. Adjust logo size
QRcito shows a slider with the logo percentage relative to total QR size.
- Minimum recommended: 15%. Below that, it's not visible.
- Maximum safe: 25%. Above that, reading starts failing even with ECL H.
- Sweet spot for most logos: 20%.
If your logo has fine detail (thin lines, small text), aim for 22–25%. If it's a simple symbol (a circle, a letter), 15–18% is enough.
4. Verify it still scans
This is non-negotiable. Before downloading, scan the QR on screen with your phone:
- iPhone: native camera.
- Android: camera or Google Lens.
- If unsure or stuck, see our tutorial on how to scan without an app.
If detection takes more than 2 seconds, reduce logo size. If detection simply fails, the logo is too large or contrast is insufficient.
5. Download in the right format
- SVG: for print (poster, packaging, professional flyer, vinyl, display).
- PNG: for web, social media, PowerPoint presentation, or email signature.
SVG scales without quality loss at any size. PNG is limited to the resolution you choose (200 to 2000 px in QRcito).
Design best practices
Contrast
The body of the QR must be dark on light background, not the other way around. Though modern readers tolerate inverted QR, many don't. Keep:
- Module color: black or a corporate dark color (WCAG contrast ratio ≥ 4.5:1 with background).
- Background: white or a very light tone of your brand.
Avoid very saturated gradients on modules. A blue-to-light-blue gradient works; a red-to-yellow gradient may have low-contrast stretches.
Logo with or without background
- With white or solid color background: safer. Creates a clear "visual hole" and the reader has less confusion.
- Without background (transparent): more elegant, but only if the logo is simple and modules behind remain recognizable.
If in doubt, use white background. You lose some elegance, you gain readability.
Quiet zone
It's the white margin around the QR. It should be at least 4 modules wide. Sticking the QR against a flyer edge without margin drops read rate by 30%. QRcito already adds the quiet zone by default at export.
Client logo vs your own logo
If you make QR for a client:
- Their logo goes in the center of the QR.
- Yours (if needed, by contract or attribution) goes outside, in a design corner, not on top of the code.
Common errors
"My logo shows but the QR doesn't scan"
- Logo too large. Drop to 20%.
- ECL not set to H. Enable H correction.
- The logo covers one of the three "eyes" (the large corner squares). Those are positioning patterns; they can't be covered. Center the logo only in the middle.
"Scans on iPhone but not Android (or vice versa)"
- The Android reader is usually stricter with contrast. Boost logo contrast and check WCAG ratio.
- If the logo has transparent background and there's a complex pattern behind, try white background.
"Logo looks blurry when printed"
- You downloaded PNG at low resolution (≤ 500 px). For print, use SVG. If you only have PNG, minimum 2000 px.
- If you only have the logo as low-quality PNG: regenerate it from Canva or ask your designer for the SVG. Improving the SVG quality in QRcito won't compensate for a blurry source.
"QR works but some phones are slow"
A sign you're at the limit. Reduce logo by 5 percentage points (from 25% → 20% for example) and retest. Detection speed matters: if it takes 4 seconds in a street window, the customer has already moved on.
Templates and combinations that work well
| Brand type | Recommendation |
|---|---|
| Letter logo (Google, Twitter, etc.) | Letter in white over brand-color square, 18–20% |
| Symbol logo (Nike swoosh, Apple) | Solid symbol in brand color, white background, 18% |
| Long wordmark (Coca-Cola) | Better not to use the whole thing. Use only initial or symbol |
| Personal profile photo | Crop square, circle with color background, 20% |
| Logo with lots of detail | Simplify first. A complex logo at 60×60 px always looks bad |
Privacy: where your logo is processed
When you upload a logo to QRcito, the file is never sent to any server. The generator is 100% client-side: the image is processed in your browser, embedded in the resulting SVG/PNG, and downloaded directly to your disk. If you need it for a client under NDA, you're not leaking the branding before launch.
Frequently asked questions
Can I add a logo to a WiFi or vCard QR too? Yes. It works the same with any content type: URL, WiFi, vCard, MeCard, geo, PayPal, etc. The H correction level is independent of content type.
Will the logo inside the QR cost me licensing if I print thousands? Depends on the logo, not the QR. If it's your brand, no cost. If you use a third-party logo (an Instagram symbol, Spotify, a flag), check the owner's brand guidelines.
What's the minimum print size for a QR with logo? Same as a standard QR: 2 cm × 2 cm if scanned close; 3 cm × 3 cm or more for any doubtful case. Review the minimum QR size guide.
Can I animate the logo in a web QR? The QR standard doesn't support animation; but if you export as SVG you can animate the logo with CSS without touching the code modules. More of a technical curiosity than real utility: scanned with a native camera, animation isn't detected.
How many colors can I use for modules without breaking reading? Two are usually enough (dark + light). If you want gradients, ensure minimum contrast ratio at any gradient point is ≥ 3:1 with background. More than 3 colors gets complicated.
In short
A well-done QR with logo boosts trust, scans, and brand recognition. Three rules: H correction, logo at 20%, test on two phones before printing. The rest is style.
Create your QR with logo, free, no signup and 100% in your browser: qrcito.com