QR Code with Logo: How to Add One That Still Scans

Why a logo works at all: error correction

A QR code is a grid of dark and light squares called modules. When you place a logo in the centre, you are literally destroying the modules underneath it. The reason the code still scans is Reed-Solomon error correction: alongside your data, the QR standard stores redundant codewords that let a reader reconstruct missing or damaged modules.

How much damage a code can absorb depends on its error correction level (ECL). Level L recovers about 7% of codewords, M about 15%, Q about 25% and H about 30%. Those percentages are the budget your logo spends from, and every smudge, print defect or reflection spends from the same budget. If the logo alone eats 25% of the modules on an M-level code, there is nothing left for real-world wear and the code fails.

For a deeper explanation of how the levels affect size and reliability, see QR code error correction explained.

Set error correction to Q or H before adding a logo

The rule is simple: a logo QR code should use level Q (25%) or H (30%). Level H gives the most headroom and is the right default for print, where scratches and glare are guaranteed. Level Q is a reasonable compromise when the payload is long and you want to keep the module count down.

Higher error correction is not free. It adds codewords, which pushes the code to a higher version with more modules per side, so the same URL produces a denser grid. Denser modules are smaller at any given print size and harder for a camera to resolve. This is why short URLs matter so much for branded codes; a dynamic QR code with a 30-character redirect link stays compact even at level H.

On [qrsvg.app](/) the default level is M, but the moment you upload a logo the generator raises it to at least Q automatically. You can still switch to H manually in the error correction control, and for anything going to print you should.

Safe logo size: 15-25% of the code width

Keep the logo between 15% and 25% of the code's total width. At 20% width the logo covers roughly 4% of the total area, which is comfortably inside the 30% budget of level H even after accounting for the modules the logo edges partially clip. The tool allows anything from 10% up to a hard cap of 35%, but treat the upper range as a last resort for large, high-contrast prints that you have tested thoroughly.

Remember that the percentage is by width, not area. Doubling the width from 15% to 30% quadruples the area covered, from about 2% to about 9% of the modules. Combined with the modules along the logo border that become ambiguous, a 35% logo can burn through most of the correction budget of an H-level code before it leaves the screen.

A short payload helps here too. A version 3 code (29 x 29 modules) with a 25% logo loses fewer total codewords than a version 10 code (57 x 57) with the same proportional logo, simply because there are fewer codewords for the reader to reconstruct in relation to the correction budget.

Knockout vs overlay, padding and backdrop

There are two ways to place a logo. An overlay simply draws the logo on top of the modules; partially covered modules along the edge create a noisy fringe that readers may interpret either way. A knockout, also called excavation, removes every module the logo touches and leaves a clean rectangle of background behind it. Knockout costs slightly more modules but produces a much cleaner boundary, and readers handle a crisp empty block far better than a jagged mixture.

qrsvg.app supports both: the knockout toggle clears the modules behind the logo, and the padding control adds a margin of background between the logo edge and the surrounding modules. A padding of one module width is enough to stop the logo and the code visually merging, which matters both for aesthetics and for scanners that segment the image by dark regions.

If your logo is light, multicoloured or has transparent areas, give it a solid backdrop, usually white, the same colour as the code background. A logo with no backdrop sitting over a transparent background is the most common cause of a branded code that scans on screen but fails when printed on coloured stock.

Never cover the finder or alignment patterns

The three large squares in the corners are finder patterns, the eyes. A scanner locates and orients the code by finding these first; if one is obscured, decoding never starts and no amount of error correction helps because error correction only protects data, not structure. Keep logos, badges and labels well clear of them.

Codes at version 2 and above also contain smaller alignment patterns, 5 x 5 squares that help the reader compensate for perspective distortion. On small codes there is one, near the bottom right; on larger codes they form a grid across the symbol, including the centre where a logo usually sits. Losing one alignment pattern to a centred logo is normally tolerable because the data modules around it are protected by error correction, but a logo that sprawls across several of them on a version 10+ code invites failures when the code is scanned at an angle.

The timing patterns, the alternating dotted lines connecting the eyes along the top and left edges, are also structural. A centred logo with sensible size never touches them, which is one more reason to keep the logo in the middle rather than in a corner.

Colours, contrast and gradients

Scanners threshold the image into dark and light. Your brand colour has to land clearly on the dark side against a clearly light background. A contrast ratio of at least 4.5:1 between module colour and background is a safe target, and higher is better. Navy, dark green, charcoal and deep red on white all work; pastel, yellow or light grey modules do not, whatever the logo looks like.

Inverted codes, light modules on a very dark background, are legal in the spec but many camera apps still struggle with them, particularly older Android devices. If your brand demands dark packaging, test it before committing, and prefer placing the whole code inside a white or light panel.

Gradient fills are supported on qrsvg.app in both linear and radial form and can look excellent, but check the lightest stop. A gradient that runs from dark blue to sky blue may leave the sky-blue corner too light to register as dark. Keep every stop of a gradient well within the dark range and verify the finished code with the contrast rules above. The same warning applies to decorative module shapes such as dots or stars, which reduce the dark area of each module; see how to create a QR code for how styling and reliability interact.

Use an SVG logo and export SVG

A raster logo (PNG or JPEG) embedded in a QR code is fixed at its pixel size. When the code is scaled up for a poster or scaled down for a business card, the logo blurs or aliases while the modules stay sharp. An SVG logo scales with the code, so the same file works from a 20 mm sticker to a 2 m trade show banner.

The same logic applies to the output. Exporting the finished code as SVG keeps the modules and the logo as vector geometry that Illustrator, InDesign, Figma or a print shop can place at any size with no loss. qrsvg.app also exports PNG, JPEG, WebP and PDF, but SVG is the flagship format for exactly this reason; read SVG vs PNG QR codes for when each one makes sense, and the size and print guidelines for physical dimensions.

Test on real phones before you print

A branded code that decodes instantly on a flagship iPhone in perfect lighting has told you almost nothing. Test on at least three devices: a current iPhone, a current Android and a cheap or older Android phone with a mediocre camera and no dedicated QR mode. The third one is the one that finds problems.

Test at the intended distance and size. Print the code at the final dimensions, or hold the phone at the real distance from the screen, and try a few angles and lighting conditions including a slight glare. If the budget device needs more than two seconds or more than one attempt, shrink the logo, raise the error correction to H, add padding, or simplify the design until it is instant.

• Scan from 30 cm and from the maximum realistic distance for the placement.
• Scan at a 30-degree angle and under a window or spotlight.
• Confirm the decoded URL is exactly right, including https and the path.
• Repeat after printing on the actual material; colour shifts on paper change contrast.

How to add a logo to a QR code

1. 1

   Enter your content

   Open the generator, choose URL (or another content type) and paste the destination. Keep the URL short or use a dynamic QR code so the module grid stays sparse.

2. 2

   Raise error correction to Q or H

   In the error correction control choose H for print or Q for screens. The tool moves to at least Q automatically when a logo is added, but H is the safer choice.

3. 3

   Upload the logo

   Upload an SVG version of your logo if you have one; PNG works but will not scale as cleanly. Centre it and set the size to 15-25% of the code width.

4. 4

   Enable knockout and padding

   Turn on knockout so modules behind the logo are removed, then add about one module of padding so the logo has a clean border. Add a solid backdrop if the logo is light or transparent.

5. 5

   Check colours and contrast

   Use dark modules on a light background with at least 4.5:1 contrast. If you use a gradient, make sure every stop is dark enough to read as a module.

6. 6

   Export and test

   Download as SVG for print or PNG for web, then scan the exported file on an iPhone, an Android phone and a budget Android device at the real size and distance.

Frequently asked questions

What error correction level should a QR code with a logo use?

Use Q (25%) or H (30%). H is the safer choice for print. qrsvg.app switches to at least Q automatically when you add a logo.

How big can the logo be?

Keep it between 15% and 25% of the code's width. The tool caps logos at 35%, but anything above 25% needs level H, a short payload and testing on budget phones.

Can I put the logo in a corner instead of the centre?

No. The corners hold the finder patterns that scanners need to locate the code. Covering one stops decoding entirely regardless of error correction.

Does a logo make the QR code bigger?

Indirectly. The higher error correction a logo requires adds codewords, which can push the code to a higher version with more modules, so the printed code needs to be slightly larger for the same scan distance.

Is a QR code with a logo free on qrsvg.app?

Yes. Logo upload, knockout, padding and SVG, PNG, JPEG, WebP and PDF export are free and need no account.