Why the Middle and Nowhere Else
The centre is the only large part of a QR symbol with nothing structural in it. No finder squares, no timing line, no format information. Everything there is ordinary data, and ordinary data is exactly what error correction knows how to rebuild.
Put the same logo over a corner and you take out a finder pattern, which is how the phone locates and orients the symbol in the first place. No level of error correction brings that back. So the middle is not a design convention, it is the one place the maths allows.
How Much of the Middle You Can Actually Take
Every page that answers this quotes one number. Usually 30%. Here is the same question asked of the encoder instead, walking the logo up one percent at a time and keeping the last width that still decoded.
| The link | Chars | Level L | Level M | Level Q | Level H |
|---|---|---|---|---|---|
| Bare domain | 19 | 13% | 13% | 21% | 32% |
| One path segment | 24 | 5% | 21% | 32% | 32% |
| Campaign URL | 62 | 16% | 22% | 37% | 40% |
Read across a row and the number moves with the level, which is expected. Read down a column and it moves with the link, which is not. A longer URL builds a bigger symbol with more modules to spare, so the same proportion of the middle costs proportionally less. That is why a single percentage is the wrong shape of answer, and why the slider above tells you about your code rather than about codes in general.
Two things surprised me. Level L barely tolerates a logo at all, and at two modules of clearance on a short link nothing fit. And H does not automatically beat Q: on the middle link both stopped at the same width, because H adds redundancy and adds modules to carry it, and the two partly cancel. Use H because the code is going to be printed and scuffed, not because you assume it buys more branding.
One caveat worth stating. That table is one probe image, one clearance setting, this decoder. Your logo shape and your printer will move it. Treat it as the shape of the answer, and let the logo QR code generator give you the verdict on the actual file you are about to download.
Getting It Into InDesign, Illustrator or Canva
None of the three can put a logo inside a code they generated themselves. The route is the same in all of them: make the code here, take the SVG, place the logo on top.
- InDesign
- InDesign generates its own codes under Object, then Generate QR Code, and it will not put anything in the middle of one. Make the code here, download the SVG, then File, Place it and set your logo on top as a separate frame.
- Watch for: InDesign's own generator gives you no control over error correction, so a logo dropped over it is a guess. That is the actual reason to bring the code in from outside rather than a preference about workflow.
- Illustrator
- Place the SVG, then Object, Clipping Mask or just draw a white rounded rectangle behind the logo. Keep the white patch as one shape rather than several overlapping ones.
- Watch for: Illustrator will happily let you cover half the symbol. It has no idea whether the result decodes, so size the logo here first, then rebuild the same proportion there.
- Canva
- Canva's own QR app cannot place a logo in the centre. Upload the PNG or SVG from here, drop your logo on top, and group them before you export.
- Watch for: Canva exports PNG at a fixed size and can soften edges on a resize. For anything printed, take the SVG from here and give the printer that instead.
- Figma and Sketch
- Paste the SVG straight in. The pattern arrives as a single path, so a logo on a frame above it will not disturb the modules underneath.
- Watch for: Neither tool decodes anything. Screenshot the artboard and run it through the scanner on this site before you send it anywhere.
What I Would Do Before a Print Run
- The centre is the cheapest place to cover
- It is the one region with no finder pattern, no timing pattern and no format information. Put the same logo over a corner instead and you take out a finder square, which no amount of error correction rebuilds.
- Clearance costs more than the logo does
- Going from one module of white space around the mark to three took the ceiling on a medium link from 21% down to 5% at level M. The gap is bought from the same budget as the logo itself.
- Level L and a logo are not a combination
- On a short link, level L stopped decoding at anything past 13%, and with two modules of clearance nothing fit at all. If there is a mark in the middle, start at Q.
- H does not always buy more room than Q
- On the medium link both stopped at 32%. H adds redundancy and adds modules to carry it, and those partly cancel. Use H because print damage is coming, not because you assume it gives more logo.
- Test the print, not the screen
- A logo at the ceiling decodes on a monitor and fails on paper, because ink spread eats the clearance you just measured. Drop a few percent below whatever the table says before a print run.
- Keep the patch one solid colour
- A transparent logo over the pattern leaves modules showing through the gaps, and a decoder reads those. Sit the mark on a solid patch instead.
What This Does Not Do
- It will not accept an SVG logo. An SVG can carry scripts, and the file you download gets sent to a printer or published, so the upload takes PNG, JPEG, WebP and GIF only.
- No scan counts. A static code holds the address and nothing phones home. Counting needs a dynamic code and a redirect you control.
- It cannot rescue a logo that is simply too big. Past the ceiling the download stays locked, which is the tool working rather than failing.
- For artwork behind the whole symbol rather than a mark in the centre, that is a different technique, and QR code art is where it lives. For a brand colour on the modules, see branded QR codes.
Logo in the Middle: Common Questions
How do I create a QR code with a logo in the middle?
Paste your link into the tool above, upload the logo, and size it with the slider. The code is rendered and read back with a decoder before the download unlocks, so a logo that covers too much is refused rather than handed to you. Nothing is uploaded: the image is read in your browser and embedded in the file you download.
How big can the logo in the middle be?
There is no single percentage, which is the thing most pages get wrong. It depends on the length of your link, the clearance around the mark and the error-correction level. On the measurements in the table on this page it ranged from nothing at all up to 40%, and the same level moved by nine points just from changing the link. Use the slider and let the decode test answer it for your code.
Why does covering the middle work at all?
Two reasons. QR error correction stores redundant copies of the data, so a decoder can rebuild modules it cannot see. And the centre is the only large area with no finder pattern, no timing pattern and no format information in it, so what you destroy there is ordinary data rather than the structures the scanner uses to locate and orient the symbol.
Does a logo in the middle make the code less reliable?
Yes, and that is the trade. The error correction you spend on the logo is the same budget that would have absorbed a crease, a smudge or bad lighting. A code at its ceiling decodes cleanly on screen and is the first one to fail on a printed menu.
Can I put a logo in the middle of a QR code in Canva?
Not with Canva's own QR app, which has no logo option. Make the code here, export the PNG or SVG, upload it to Canva and place your logo on top. For anything printed take the SVG, because Canva's PNG export is a fixed size and softens when it is scaled up.
How do I add a logo to a QR code in InDesign?
Not with the built-in generator, which offers no error-correction control and no logo slot. Generate the code here at level Q or H, download the SVG, then File, Place it in InDesign and put the logo in a frame on top with a white patch behind it.
Will a QR code with a logo in the middle still scan?
It will if the logo is inside the limit for that code, and this tool will not let you download one that is not. Every download is decoded back first, so the check is on the actual finished image rather than on a rule of thumb.
Is this free?
Yes, with no account, no watermark and no limit on how many you make. Static codes are generated in your browser, so they cost nothing to serve.
More for make it yours
Colour, a logo in the middle, artwork behind it, each one measured against what still scans.
- Branded QR codeYour brand colour and logo on a code that still scans, with the colour contrast measured for you.
- SVG QR codeVector output that scales to any size, with the exported markup shown and the file compared against PNG.
- Coloured QR codePick a colour and see the measured contrast ratio, with a palette showing which shades survive print.
Guides worth reading
All guides- Comparisons
Static vs Dynamic QR Codes
What the redirect actually buys you, measured on real encoded codes, and which payloads are worse off for it.
16 min read - Printing
QR Code Sticker Size: The Circle Costs You 30%
The usable square inside a round sticker is 70% of its diameter. Measured minimum sizes for real links, against every common sticker size.
8 min read - Reference
Offline QR Code Generators for Every Device
What each platform already ships, the measured cost of each payload type, and how to check an offline claim yourself.
26 min read
