Design
QR code with logo: how to keep it scannable
A QR code with your logo and brand colors stands out and gets scanned more than a black-and-white pixel pattern. But every logo covers part of the code. Here is why that still works, how large the logo may be and which design ideas throw scanners off.
Upload a logo, pick colors, done: the QR Code Generator sets the right error correction automatically and checks every design for readability in your browser.
Create a QR code with logoThe short version
- Enter your content and, in the QR Code Generator under “Design”, upload your logo.
- Keep the logo size at 20–25% and leave “Clear the area behind the logo” on.
- Leave error correction on Automatic (becomes H with a logo).
- Dark pattern on a light background – and save once the check says “Easy to scan”.
Why a logo doesn’t break the code
Besides the actual data, QR codes contain extra error correction (Reed–Solomon codes, the same idea used on CDs). If part of the pattern is missing – a scratch, dirt or a logo – the scanner reconstructs the data from that reserve. There are four levels:
| Level | Recoverable (approx.) | Good for |
|---|---|---|
| L | 7% | Lots of content in a small space, clean environment |
| M | 15% | Default without a logo, required for EPC payment codes |
| Q | 25% | Small logos, rough environments |
| H | 30% | QR codes with a logo |
Important: the percentage is not an invitation to cover 30% of the code. The same reserve is needed when the photo is blurry, the paper is creased or light reflects. A logo should only use a small part of the reserve. More error correction also makes the code denser (more, smaller modules).
Step by step
- Enter the content. The shorter the better: a short link gives a coarser pattern that tolerates a logo more easily.
- Upload the logo. In the QR Code Generator under “Design → Logo”. The image stays in your browser.
- Clear the area. “Clear the area behind the logo” removes the modules under the logo and puts a calm plate behind it. That looks cleaner and is less ambiguous for scanners than a logo on top of the pattern. “Round area” suits round logos and emblems.
- Set the size. The slider sets the logo width relative to the code. 20–25% is a good starting point.
- Colors and shapes. Pick a preset or set pattern, corners and colors yourself – for example corners in your brand color.
- Wait for the check. With every change, the code is rendered and read back in the browser, large and small. Only export when it says “Easy to scan”.
Add your logo, pick a preset and watch the green check tell you whether the code still scans reliably.
Five rules for a readable design
- Dark on light. Many scanners expect dark modules on a light background. A white pattern on black looks classy, but some cameras and apps won’t recognize it. The generator warns about inverted colors.
- Contrast of at least 4:1. Pastels on white or dark blue on black are too weak. With gradients, even the lighter of the two colors must be clearly darker than the background.
- Keep the corners free. The three large squares in the corners (“finder patterns”) tell the scanner where the code is and how it is tilted. They may have a different shape and color, but must never be covered. The logo belongs in the center.
- Respect the quiet zone. The code needs a free margin of about four modules around it. Text, image edges or patterns right next to the code disturb detection.
- Don’t overdo it. Tiny dots, gaps between modules and a large logo add up. If you want a lot of styling, use short content and print a little larger.
Which logo file works best?
| Format | Verdict |
|---|---|
| SVG | Best – stays vector in the SVG export and sharp at any size. |
| PNG with transparency | Very good. At least 500 px wide so it stays sharp in print. |
| JPG | Works, but brings a rectangular background. With “Clear the area” that is barely noticeable. |
| Wide wordmarks | End up very small. Better use the symbol or the initials. |
Export for print and web
- SVG for design software, layouts and print shops – vector, scales to any size.
- PDF at an exact width in millimeters, ready to place in flyers or invoices. Without a gradient, the PDF is vector too.
- PNG for websites, slides and social media. 1024 px is enough for screens and for print up to about 8 cm at 300 dpi; choose 2048 or 4096 px for larger prints.
Test for real before printing. The readability check simulates a camera close up and from a distance. A test print on the final material and a scan with two or three different phones are still the best insurance – especially for large print runs.
Create your QR code with logo
Logo, colors, shapes and frames – with an automatic readability check. Free, no sign-up, no upload.
Frequently asked questions
Can I create a QR code with a logo for free?
Yes. Logo, colors, shapes, frames and all export formats are free, with no sign-up and no watermark.
How large can the logo be?
As a rule of thumb, at most 25–30% of the code’s width – less than 10% of its area – with error correction H. The readability check shows whether it still works in your case.
Which error correction do I need with a logo?
Level H (about 30%). The generator sets it automatically as soon as you upload a logo.
Is my logo uploaded?
No. The image is processed only in your browser and never sent to a server.
Can I give the corners a different color?
Yes. With “Custom color for the corners” you can color the frame and dot of the three corner markers separately.
Why doesn’t my white QR code on black scan?
Many scanners look for dark modules on a light background. Not every app and camera reads inverted codes – for print and posters, use dark on light.
Does a QR code with a logo expire?
No. The code is static; the content is stored in the pattern itself. It works as long as the target exists.
Sources
- Error correction feature, DENSO WAVE – inventor of the QR code.
- ISO/IEC 18004:2015 – QR Code bar code symbology specification, ISO.
- jsQR – the open-source decoder behind the in-browser readability check.