How to Create a QR Code with Your Logo (Step-by-Step + 12 Design Tips)

Quick Answer

To create a QR code with your logo, use a QR code generator that supports embedded logo placement at error correction Level H, drop a square or PNG-with-transparency logo into the center at no more than 30% coverage of the matrix, and test the result on at least three real phones before printing. The whole process takes 90 seconds in QRbug, Adobe Express, or any modern QR code creator.

The trap most teams fall into: dropping a too-large or too-detailed logo onto a code with default error correction, which silently breaks scan reliability for ~20% of users. This guide covers the 12 design rules we use to keep branded QR codes scannable, plus the step-by-step setup in the major generators.

Why embed a logo at all?

Two reasons backed by industry data:

1. Scan rate increases. A 2025 Scanova study of 18,000 codes found branded QR codes (with logo) had a 26% higher scan rate than plain black-and-white codes on identical placement. Users recognize the brand, trust it, and scan with intent.

2. Brand recall. A QR code with your logo is a brand impression even before the scan. Users see hundreds of QRs a year; the ones with a logo register as yours.

Cost: a slight reduction in scan reliability (offset by error correction) plus 30 seconds of design work.

How embedded logos work technically

A QR code reserves a portion of its modules for error correction — Reed–Solomon coding lets the scanner reconstruct missing or damaged data up to a defined percentage of the matrix:

When you embed a logo, you cover (and effectively destroy) modules underneath it. The error correction must be high enough to reconstruct the covered area. Level H tolerates up to 30% coverage; below 30%, scanners can recover. Above 30%, scan reliability falls off a cliff.

The math is non-linear. At 25% logo coverage on Level H, scan reliability stays above 95%. At 35%, it drops below 80%. At 40%, below 60%. Don't push past 30% no matter how good the logo looks at 35%.

The 12 rules for a logo-embedded QR code that scans

These are the rules we apply to every client logo embed. Follow all 12 and you won't have scan failures.

1. Set error correction to H before adding the logo

Most generators default to M. M can only tolerate 15% coverage; you need H to reach 30%. Switch first, then add the logo.

2. Cap logo coverage at 30% of the matrix

Use the visual ruler in your generator. The logo should fit inside the central 1/3 of the QR code, not bleed past it.

3. Place the logo dead center

Off-center logos increase the chance of overlapping a finder square (the three big corners), which the scanner cannot error-correct. Always center.

4. Use a square or circular logo, not a wide rectangle

A wide logo eats horizontal modules disproportionately. Square or circular logos are more efficient with the coverage budget.

5. Add a white (or background-colored) padding ring around the logo

Most generators do this automatically. The padding gives the scanner a clean boundary between logo and matrix, improving recognition.

6. Don't use a transparent background — pick a solid

Transparent logos let the QR matrix bleed through, creating a busy, hard-to-scan center. Use a solid color (white, brand color, or matching background).

7. Pick high-contrast logos

A pale gray logo on a light blue background looks fine but offers no contrast for the scanner if the background bleeds through. High-contrast logos read as a clean shape.

8. Test at the actual print size, not at 600×600

A logo that looks fine at 600×600 px on screen may dominate the matrix at the actual 25mm print size. Render the QR at the final intended size before approving.

9. Test on three real phones — old + new, iOS + Android

The scanner on an iPhone 15 is far more forgiving than on an iPhone 8 or a 4-year-old Android. If any of the three test devices fails, dial back the logo size by 5%.

10. Keep the logo monochrome or two-color

A multi-color logo with gradients introduces noise the scanner has to filter through. The cleanest logo embeds are flat, 1–2 color shapes.

11. Avoid logos with thin lines or fine detail

Detail under 4 pixels at the printed size disappears anyway. Use the simplified version of your logo (the "favicon" version) for QR embedding.

12. Re-test after every print run

Print quality varies between print shops. A logo that scanned at 99% reliability on the digital proof may drop to 85% on cheap newsprint. Always test the actual physical print.

Step-by-step in QRbug

90 seconds, end to end:

1. Go to qrbug.com.
2. Pick URL type. Paste your destination.
3. Click Customize → Error correction → set to H.
4. Click Logo → upload your PNG or SVG. Recommended: square, 200×200 px or 1:1 SVG, transparent or white background.
5. Adjust the logo size slider to ~25% (stay under 30%).
6. Pick brand colors for dot color and eye color. Verify ≥4.5:1 contrast against background.
7. Click Download SVG. (Use SVG for print, PNG for screen.)
8. Test the file by scanning from three phones.

If any phone fails, raise error correction (already at H) is impossible — instead reduce logo size to 22%, increase contrast, or simplify the logo.

Step-by-step in Adobe Express

Slightly more design control, similar workflow:

1. New QR code project. Pick URL type, paste destination.
2. Open Design panel. Set EC level to H.
3. Click + Add element → upload your logo. Drag it to the center. Resize to ~25% of the QR.
4. Use Adobe's color picker to set foreground color. Background defaults to white.
5. Export as SVG (1200×1200) for print.

Adobe Express has slightly tighter logo placement controls but lacks dynamic redirect (it's a static-only generator). Fine for one-off branded codes; not for campaigns that need analytics.

Step-by-step using the qr-code-styling library (developers)

For programmatic generation:

import QRCodeStyling from 'qr-code-styling'

const qr = new QRCodeStyling({
  width: 600,
  height: 600,
  type: 'svg',
  data: 'https://example.com',
  image: '/path/to/logo.png',
  qrOptions: {
    errorCorrectionLevel: 'H',
  },
  imageOptions: {
    hideBackgroundDots: true,
    imageSize: 0.3,           // 30% coverage cap
    margin: 4,                // padding ring
    crossOrigin: 'anonymous',
  },
  dotsOptions: {
    color: '#1d4ed8',
    type: 'rounded',
  },
  cornersSquareOptions: {
    color: '#1d4ed8',
    type: 'extra-rounded',
  },
  backgroundOptions: {
    color: '#ffffff',
  },
})

await qr.toFile('output.svg')

The imageSize: 0.3 is the cap on logo coverage — never raise it above 0.3. The hideBackgroundDots: true removes the dots underneath the logo, giving the scanner cleaner edges.

Common mistakes

Logo too big

The most common failure mode. A 35% logo looks fine on screen but breaks scan reliability on older phones. Stay at or under 30%.

Wrong error correction level

Default Level M gives 15% recovery. A 30% logo on Level M is unreadable for half the population. Always switch to H first.

Multi-color logo with gradients

The scanner's threshold algorithm has to decide which pixels are "module" and which are "logo." Gradients confuse it. Flat colors only.

Logo on top of finder squares

The three big corner squares are how scanners orient. If the logo overlaps any of them, the scanner can't lock on, error correction or not. Center the logo away from corners.

Skipping the print test

Logos that scan at 100% on digital fail at 60% on newsprint or canvas. The print medium absorbs ink and softens edges; both reduce contrast. Test on the actual stock.

Embedding a logo in a static QR for a long campaign

If you'll need to update the URL later, you'll have to reprint the whole branded code. Use dynamic for any campaign QR — see dynamic QR codes explained.

Logo size guide by QR purpose

These are conservative recommendations. You can push higher in controlled conditions, but a 5% safety margin pays for itself the first time someone scans from a poor angle.

When NOT to embed a logo

Three cases where a plain QR code is better:

1. Scan-critical environments. Pharmaceutical packaging, medical devices, payment QRs — anywhere a scan failure has real cost. Skip the logo, prioritize reliability.

2. Very small print sizes. Below 15mm × 15mm, even a tiny logo eats too much of the matrix. Plain code only.

3. High-density data payloads. A QR encoding 500+ characters is already at the edge of scannability. Adding a logo on top reduces margin further.

For everything else — marketing campaigns, restaurant menus, event signage — a well-sized logo is a free 26% scan-rate uplift.

FAQ

What's the maximum logo size for a QR code?

30% of the matrix area at error correction Level H. Above 30%, scan reliability drops sharply. Below 25% is the safe zone for older phones.

Why does my QR code with logo not scan?

The most common reasons in order: error correction was set to M instead of H; logo exceeds 30% coverage; logo is too far off-center and overlaps a finder square; insufficient contrast between dots and background; or the printed size is below 2cm × 2cm.

Can I put any logo in a QR code?

Yes, as long as it fits the size and coverage rules. Square, monochrome, simple logos work best. Wide rectangles, multi-color gradients, and detail-heavy logos work worst.

Does adding a logo make the code easier to spot?

Yes — published studies (Scanova 2025) show 26% higher scan rates for branded codes vs plain. Users recognize and trust the brand, and scan with intent.

Do I need a special QR code generator for logos?

Most modern generators support logos out of the box. The features to check: error correction level selectable (must include H), logo size slider, automatic background-dot removal, and SVG export. We covered the full evaluation framework in the complete generator guide.

Can I use my favicon as the QR logo?

Yes, and it's often the best choice. Favicons are simplified versions of the brand logo, designed to read at small sizes — the same constraint a QR-embedded logo has. Re-export the favicon at 200×200 px PNG with transparent background, drop it in.

What's the difference between a "QR code with logo" and a "branded QR code"?

Functionally the same — both refer to a QR code with embedded logo and (usually) brand-colored dots. "Branded QR code" sometimes also implies a custom frame around the code, which adds another visual layer but doesn't change the matrix.

A logo turns a generic QR code into a brand impression — at the cost of one rule: stay under 30% coverage at Level H. Follow that and the rest of the rules become tactical.

If you want to skip the manual setup, QRbug's branded QR builder auto-applies Level H + 30% cap + center placement when you upload a logo.