Why a logo in the middle of a QR code actually works
A QR code looks fragile — a dense grid of black and white squares where every module seems to matter. So the first time people cover the center with a logo, they expect it to stop scanning. It usually doesn't, and the reason is a feature built into the QR standard itself: Reed–Solomon error correction.
When a QR code is generated, extra redundant data is baked in so the code can still be decoded even if part of it is dirty, torn, or covered. That is the same mechanism that lets a QR code on a crumpled receipt still scan. A centered logo is simply a controlled, deliberate version of that damage — and if you stay within the redundancy budget, the scanner reconstructs the missing modules and reads the code normally.
This tool (QR Code with Logo) handles the two things that make the difference between a branded code that scans every time and one that fails on older phones: it forces the highest error-correction level, and it places a clean white backing plate behind your logo so the scanner's edge detection isn't confused.
Error-correction levels: the budget that pays for your logo
QR codes have four error-correction levels. Each one reserves a percentage of the code for recovery data — that percentage is, in effect, the share of the code you can obscure and still decode:
| Level | Recovery capacity | Good for |
|---|---|---|
| L (Low) | ~7% | Clean digital display, no logo, maximum data density |
| M (Medium) | ~15% | The common default; light styling only |
| Q (Quartile) | ~25% | Small logos, print where minor wear is expected |
| H (High) | ~30% | Center logos, stickers, outdoor signage |
A logo drawn at the recommended size covers roughly 4–8% of the code's area. That fits comfortably inside L's 7% on paper — but real scans also lose data to glare, motion blur, low light and cheap camera sensors. **Level H (30%) leaves a wide safety margin for the logo *and* real-world conditions at the same time**, which is why branded QR codes should almost always use it. This tool sets H for you automatically.
The ideal logo size (and why bigger fails)
The single most common mistake with branded QR codes is making the logo too large because it looks better in a mockup. Here is the trade-off in plain terms:
Around 20% of the QR width is the sweet spot — big enough to be recognisable, small enough to stay safely inside the H error-correction budget. This tool renders at roughly this size.
25–30% can still work for a short URL encoded at level H, but you are spending your entire safety margin on the logo, leaving nothing for glare or a shaky hand.
Above 30% you are past the recovery budget. The code may scan on your phone under perfect lighting and fail on a customer's older device in a dim restaurant — the worst kind of failure, because you won't catch it in testing.
There is also a hidden factor: the more data you encode, the denser the grid, and the less room a logo has. A short link (say, a `bit.ly` or a clean domain) leaves far more headroom than a 200-character URL with tracking parameters. If your branded code is failing, shortening the URL is often the fastest fix.
Step by step: add your logo
1. Enter your content. Type the URL or text to encode. Shorter is better — a short link keeps the grid sparse and gives the logo more room.
2. Upload your logo. A PNG with a transparent background works best; keep it under ~2 MB. Square logos fit the centered plate most cleanly.
3. Let the tool set High correction. The QR is rendered at level H with a white backing plate behind the logo automatically — you don't need to configure anything.
4. Download the PNG and, before you use it anywhere, run the 20-second test below.
Everything is processed locally in your browser via the Canvas API — the logo image is read as a data URL and drawn directly onto the code, so nothing is uploaded to a server.
Test it in 20 seconds before you print
A branded QR code that fails in the wild is worse than no QR code — it damages trust at the exact moment a customer tries to engage. Never publish one without this check:
Scan with more than one phone. At minimum test one recent phone and one older/cheaper one. Decoders vary a lot in quality.
Test at real size and distance. A code that scans at 100% on your monitor may fail when printed at 2 cm on a business card. Print it, or hold your phone at the distance customers actually will.
Test in poor light. Most real scans happen in restaurants, shops and streets — not at your desk. Dim the lights and try again.
Check the quiet zone. QR codes need a blank margin (about 4 modules) around them. If your design crowds the code with text or a border right up to the edge, scanners struggle. Leave whitespace.
Confirm the destination. Scan it yourself and make sure it opens the exact URL you intended, with no typo and no broken redirect.
Common reasons a branded QR code stops scanning
If your code with a logo won't read reliably, it is almost always one of these:
The logo is too big. Shrink it toward 20% of the width. This fixes the majority of cases.
Low contrast. QR codes need dark modules on a light background. A dark logo bleeding into dark modules, or a low-contrast colour scheme (e.g. light grey on white), confuses the decoder. Keep strong contrast.
Encoded URL is too long. A dense grid plus a logo is a losing combination. Shorten the link.
No white plate behind the logo. Dropping a logo straight onto the modules with no separation lets partial logo shapes merge into the data grid. The white backing plate this tool adds prevents exactly this.
A JPG logo with a solid background. JPGs can't be transparent, so they stamp an opaque rectangle over the code. Use a transparent PNG instead.
PNG, SVG or JPG — which logo format to use
PNG (recommended). Supports transparency, so only the logo shape sits on the code and the white plate fills the rest. Use at least 256×256 px for crisp print output.
SVG. Vector, so it stays sharp at any size — great if you'll scale the QR up for a poster. The tool rasterises it onto the canvas; for print, exporting a high-resolution PNG afterward keeps edges clean.
JPG. Works, but has no transparency — it places a white (or coloured) box behind the logo. Acceptable for a square logo on a light design, poor for anything else.
Where branded QR codes earn their keep
A plain QR code is anonymous — it gives a customer no reason to trust that scanning it is safe. A logo in the center is a small signal of legitimacy, and in the right places that lifts scan rates:
Packaging and product labels — link to setup guides, authenticity checks or registration.
Business cards and email signatures — a branded vCard QR drops your contact details straight into a phone.
Restaurant menus and table tents — pair a logo QR with a short menu link so diners recognise it instantly.
Event badges, flyers and posters — where the QR is printed large, a logo reads clearly and reinforces the brand.
Wi-Fi sharing in a cafe or office — combine branding with a Wi-Fi QR so guests connect without asking for the password.
Frequently asked questions
Q: Why does the tool force High error correction?
A logo covers part of the code, and only High (30% recovery) leaves enough margin to tolerate that occlusion plus real-world scanning conditions. At Low or Medium, the same logo can push the code past its recovery limit and break decoding.
Q: What is the white plate behind my logo for?
It creates a clean separation between the logo and the QR modules, so the scanner's edge detection isn't confused by partial logo shapes bleeding into the data grid. It's a small detail that meaningfully improves reliability.
Q: What logo size is best?
About 20% of the QR width. That's the largest size that stays reliably scannable at High correction. Larger logos may work under perfect conditions but fail on older phones or in poor light.
Q: Does my logo need to be square?
No, but square logos look best because they fit the centered plate cleanly. Transparent PNGs work particularly well — the white plate fills the gap around a non-square shape.
Q: Is my logo uploaded anywhere?
No. The image is read locally as a data URL and drawn onto the canvas in your browser. You can confirm this in DevTools → Network: you'll see no outbound request carrying your image.
Q: Can I change the QR colors and still keep it scannable?
Yes, as long as you keep strong contrast — dark modules on a light background. Inverted (light on dark) codes and low-contrast palettes are the usual cause of colour-related scan failures.
Create your branded QR code now
Open the QR Code with Logo tool, paste your link, drop in a transparent PNG, and download a code that carries your brand and still scans — no account, no upload, no watermark.
Need something different first? Start with a plain QR generator, scan an existing code with the QR reader, or encode contact and email details with the email & SMS QR tool. Questions not covered here? Reach us from the About page.
