To make a QR code with a logo that still scans, generate it at error-correction level H (roughly 30% of codewords recoverable), then center a logo that covers well under that share of the code, on a solid pad. The error-correction algorithm reconstructs missing data, but only up to its threshold. Test the result on several phones before printing.
How do you add a logo to a QR code without breaking it?
Use level H, keep the logo small and in the middle, and give it a white or background-coloured pad so it doesn't sit on top of dark modules. Our free QR code generator does all three when you drop a logo into it: it switches to level H, centers the image on a white rounded square and lets you set the size from 10% to 30% of the width. Then scan a printed copy with an iPhone camera, an Android phone's camera and a third-party reader app.
How to add a logo to a QR code in 4 steps
- Generate the QR at level H. Open the QR code generator and paste your URL into Text or URL. Error Correction switches to High automatically when you add a logo, so roughly 30% of the codewords can be restored if covered.
- Add the logo. Drag a PNG, JPG or SVG into the Logo / Image Overlay box. The generator centers it on a white rounded square. Logo Size runs from 10% to 30% of the width (default 20%); with the pad, that is about 6% of the image area at 20% and 13% at 30%.
- Download as PNG. The PNG is at least 500 × 500 pixels (larger if you pick a bigger size) and includes the logo. The SVG leaves the logo out, so for large prints add it in your design software on a white square pad.
- Test on three devices. Scan with the iOS Camera app, an Android phone's default camera and a third-party reader. Each should open the link straight away at the distance people will scan from.
The whole thing happens in your browser. The logo file is read on your device and drawn onto the code there, and there's no account or watermark.
Prepare the logo file first
The generator draws the logo into a square, whatever shape the file is. A wide wordmark at 400 × 100 pixels gets squeezed to a square and looks squashed. Use a square version of your logo, such as the icon from your app or favicon, or pad the wide logo to a square before you upload it. The image resizer does that with its "Fit inside (adds a background)" option: set the same width and height and leave the background white.
The pad behind the logo is always white, even if you tick Transparent Background or choose a coloured background. A logo on a transparent PNG therefore sits on white. If you need the pad in another colour, use the SVG and place the logo in your design app instead.
A simple mark works better than a detailed one at this size. At the default 20% setting the logo is 100 pixels wide in the 500-pixel PNG, so fine text inside it won't be readable.
Error-correction levels explained
| Level | Codewords that can be restored (approx.) | Logo guidance (rule of thumb) | Use case |
|---|---|---|---|
| L (Low) | 7% | Avoid logos | Clean print, no overlay |
| M (Medium) | 15% | A tiny icon at most | Small icon only |
| Q (Quartile) | 25% | Small logo | Standard logo |
| H (High) | 30% | Logo well under 30% of the area | Large logo, dirty print |
These are DENSO WAVE's published figures for codewords, not area. A logo damages every codeword it partly touches, so the area you can safely cover is smaller. Level H also makes the code denser: https://example.com/spring-menu is 29 × 29 modules at M and 33 × 33 at H in our generator.
How much of the code does the logo cover?
The Logo Size slider is a percentage of the whole image, quiet zone included. The share of the code itself is larger. These figures are for the 33 × 33 spring-menu code at level H, with the logo's white pad counted:
| Logo Size | Quiet zone 1 | Quiet zone 4 (default) | Quiet zone 8 |
|---|---|---|---|
| 20% (default) | 6.5% of the code | 8.9% | 12.7% |
| 30% (maximum) | 14.6% | 20.0% | 28.6% |
The bottom-right cell is the trap. With a 30% logo and the widest quiet zone, the pad covers almost 29% of the code, close to the 30% of codewords that level H can restore before you count partly covered ones. If you widen the quiet zone, lower the logo size.
Why the logo goes in the middle
A QR code with logo in the middle is the standard layout because the corners are taken. Three of them hold the large square finder patterns that tell a scanner where the code is and which way up it sits, and a scanner that can't find all three may not read the code. Codes of version 2 and up also have a smaller alignment pattern near the bottom-right corner.
The center is free in small codes. From version 7 (45 × 45 modules) up, the code has an alignment pattern in the exact center, so a centered logo sits on it. That's one more reason to keep the encoded text short; a 49-character URL stays at version 6 (41 × 41) even at level H.
5 design rules for QR codes with logos
- Maintain the quiet zone. Keep a 4-module white border around the entire QR, as DENSO WAVE's printing guidance specifies. Crowding the edges with text or graphics breaks scans.
- Use high contrast. Black QR on white background is optimal. For coloured QRs, a rule of thumb is a contrast ratio of at least 4:1 between the dark modules and the background.
- Coverage matters more than shape. Error correction counts damaged codewords, so a round logo on a square pad is fine; what breaks scans is how much the pad covers.
- Give the logo a background. Always place a white or QR-background-coloured square behind the logo. Never let the logo overlap module corners.
- Test at the smallest size you'll print. A QR that scans at 5cm may fail at 2cm. Test the worst-case print size.
Getting a print-quality QR code with a logo
The PNG download is 500 × 500 pixels. At 300 dpi that prints at about 4.2 cm (1.67 in) wide, which suits a business card or a label. For a poster or a shop window you need the vector SVG, which stays sharp at any size but contains only the code.
To add the logo to the SVG, open it in a design app such as Inkscape, Illustrator or Canva, draw a white square in the exact center and put the logo on it. Keep the square at or under about a quarter of the image width; that is what the generator's 20% default works out to with its pad. Then export and scan a full-size proof.
When to use a frame instead of an inline logo
If your logo is non-square or you need brand prominence above scan reliability, use a "frame": a rectangular container with the logo and a CTA (e.g. "Scan to Order") outside the QR area. A frame leaves the code itself untouched, so it adds no scan risk, and the call to action tells people why they should scan.
Frequently asked questions
How big can the logo be without breaking the QR?
Well below the 30% that level H can restore, because partly covered codewords count as damaged. Our generator caps the logo at 30% of the width (about 13% of the image area with its pad, or 20% of the code itself at the default quiet zone). Stay near the 20% default for print, and test.
Can I use a coloured QR code with a logo?
Yes, but keep the dark modules much darker than the background; a contrast ratio of at least 4:1 is a sensible rule of thumb. Pastel-on-white usually fails. Test before printing.
Does adding a logo hurt scan rate?
A small centered logo on level H normally scans fine; that is the damage error correction exists to absorb. Done wrong (oversized, off-center, low-contrast) it kills the QR entirely.
Can I make a QR code with a logo for free?
Yes. The generator on this site adds the logo, needs no sign-up and adds no watermark. Because the code is static, it doesn't expire either; the guide to free QR codes explains static and dynamic codes.
Why does my logo look stretched?
The generator fits the logo into a square. Upload a square version, or pad a wide logo to a square first.
Related free tools
- QR code generator with logo upload
- Favicon generator, if you also need your logo as a site icon
- Image compressor, to shrink the PNG before you email it
- Optical file transfer, which sends files between devices as a stream of QR codes
Choosing between PNG, JPG and WebP for the logo file? See how to compress images without losing quality; use a PNG if the logo has a transparent background.
