How to Put a Logo on a QR Code

The short answer

A branded QR code with a logo in the centre looks distinctive and builds recognition, but a logo sits on top of the data area, so it removes modules the scanner needs. The whole trick to a logo QR that still scans is giving the code enough redundancy to recover those covered modules, keeping the logo small enough, and never letting it touch the three finder eyes in the corners. Get those right and a centred logo scans every time; skip them and you have a pretty code no phone will read.

The recipe: set error correction to level H (about 30% redundancy), keep the logo to about 20–22% of the code width, centre it, leave the finder eyes completely clear, and choose a clean background behind the logo. Then test the result on more than one phone before you ship. QRForge’s generator does all of this in the browser — you upload the logo, set the level to H, and export. For the broader design rules, see our qr code design guide and our qr best practices guide.

Use level H so the code survives the logo

A QR code’s data area is the grid of modules between the finder patterns. A centred logo covers part of that area, removing the modules that live underneath it. Error correction — Reed-Solomon redundancy — is what lets the scanner reconstruct that missing data, so a logo demands the highest level, H, which reserves about 30% of the code for recovery. At level H the code can lose roughly a third of its modules and still decode, which is exactly the headroom a centred logo needs.

Lower levels are a false economy here. Level M (about 15% recovery) is the default for plain codes and is fine when there is nothing covering the data area, but the moment you add a logo you should switch to H. The trade-off is density: level H makes the grid denser for the same payload, so keep the destination URL short — a long URL plus level H plus a logo is the worst case, pushing the version up and making the code harder to scan at small sizes. Use a short link and the cost of level H disappears. Our qr error correction guide covers the L/M/Q/H trade-off in depth.

The 20–22% width rule

Logo size is the single most common reason a logo QR fails to scan. The safe maximum is about 20–22% of the total code width measured edge to edge — a logo wider than roughly a quarter of the code starts removing too many data modules for level H to recover, even though the code looks fine to a human eye. A logo that is too large is worse than no logo, because the redundancy cannot absorb it and every scanner fails.

Conversely, a logo that is too small defeats the branding purpose. Aim for the middle of the range — about 20% of the code width — and resist the urge to make it bigger for impact. If the logo feels lost at 20%, the fix is not to enlarge it past the safe limit; it is to simplify the logo (drop fine text, use a single bold mark) or to add a subtle frame and caption outside the code instead. Round shapes read slightly better than square logos at the same width, because they leave more data area intact.

Never cover the finder eyes

The three large square finder patterns in the corners are how the camera locates and orients the code. They are not data, and they are not protected by error correction — if a logo overlaps a finder eye, the scanner cannot even find the code, let alone decode it. Always centre the logo so there is clear space around all three eyes, and never push it toward a corner to fit a layout.

The quiet zone matters too: keep the logo inside the data area, clear of the empty margin around the code, so it does not eat into the framing border the scanner needs. If your design also uses a frame or caption, the frame sits outside the quiet zone and the logo stays centred in the data area — they do not compete. See our qr best practices guide for the quiet zone rule.

Background: transparent vs white behind the logo

What sits behind the logo matters as much as the logo itself. A logo with a transparent background lets the QR modules show through the gaps in the mark, which looks integrated but risks low-contrast gaps — a light logo on a light data area can blend into the modules and read as missing data. A solid white (or solid light) panel behind the logo guarantees contrast and is the safer choice for print and for logos with fine detail.

The rule of thumb: if the logo is a single bold dark mark, a transparent background usually works; if the logo has light or mid-tone areas, put a solid light panel behind it. Either way the panel should sit inside the safe width (the 20–22% rule applies to the panel, not just the mark) and stay centred. Keep the logo colour contrasting with its own background — a dark logo on a dark panel is unreadable as branding and adds nothing to scannability.

Logo format: SVG vs PNG

For a screen QR, a PNG logo is fine and keeps the workflow simple. For anything that will be printed or scaled — a business card, a poster, packaging — use an SVG (vector) logo so it stays razor-sharp at any size; a raster logo upscaled in the layout goes blurry and the blurred edges can soften the data modules near the logo’s boundary. If you only have a raster logo, export it at a high resolution relative to the final printed code size, not the screen size.

Whichever format you use, keep the logo’s file small and simple: drop transparency artefacts, remove thin outlines that disappear at small sizes, and avoid embedded text that will be illegible inside a 2 cm code. The QR itself should still be exported as vector SVG or EPS for print, with the logo embedded in the centre. Our how to make a QR code guide covers the export step in the generation flow, and our qr code printing guide covers the print-specific sizing and resolution rules.

Test the result before you ship

A logo QR needs more testing than a plain one, not less — you have deliberately covered part of the data area, so confirm the redundancy actually holds. Scan the final image on at least one iPhone and one Android, ideally one older mid-range phone, because a flagship camera can mask a code that an older phone cannot read. Then decode the image back to text and confirm the payload round-trips exactly, character for character — QRForge ships a free decode helper that decodes locally in the browser, so run every final export through it.

Re-run the full pass after every styling change: a bigger logo, a different background, a new logo colour, or a different error-correction level each move the scannability needle, and the only reliable check is to test the actual exported image. If a logo QR will not scan, the usual suspects are a logo wider than about 22% of the code, a level below H, a logo overlapping a finder eye, or a payload too long for the version — change one variable at a time and re-test. Our qr code validation guide is the full test pass, and our common QR code mistakes guide is the troubleshooting table.

Logo choices at a glance

Here is the whole logo recipe in one table, with what to do and why each choice matters. Work top to bottom; if the result fails a scan, walk back through the list and change one variable at a time.