MakeQR
Back to Blog
logobrandinghow-todesign

How to Add a Logo to a QR Code (Free, No Sign-Up)

MakeQR Team9 min read

A QR code with your logo in the middle looks like a deliberate design choice. A QR code without one looks like a placeholder somebody forgot to brand. The trick is that the moment you cover part of a QR with an image, you are physically destroying data — the question is whether the code can recover from that damage and still scan.

It can, if you set the error correction level high enough and keep the logo small enough. This guide walks through exactly how much of the code you can cover, which file format works best for the logo overlay, and the two-minute path from a plain URL to a brand-colored QR with your mark in the center. No account, no watermark on the output, vector and raster export both included.

Why a QR with a logo in the middle still scans

Every QR code carries built-in error correction based on Reed-Solomon codes — the same math that recovers scratches on a CD. The QR specification (ISO/IEC 18004, published 2000) defines four levels of error correction, named L, M, Q, and H, that each reserve a percentage of the code for redundancy. Level L recovers about 7 percent of damaged modules. Level M handles about 15 percent. Level Q handles about 25 percent. Level H, the strongest, handles about 30 percent.

A logo in the center occupies between 10 and 25 percent of a QR's surface, depending on size. With error correction at H, the scanner can reconstruct the missing modules in real time — your phone camera does not even register that part of the code is hidden. With error correction at L, the same overlay erases more data than the redundancy can restore, and most scanners give up.

The default level on most generators is M, which is fine for clean printed codes but unsafe with a logo. Always switch to H when you add a center image. The QR pattern becomes denser at H — same content, more modules — but the trade is worth it. A dense scannable code beats a clean unscannable one.

How big the logo can actually be

The widely cited rule among QR designers is to keep the logo under 20 to 25 percent of the code's total surface area. Push past 30 percent and even error correction H starts dropping scans, especially in low light or at angles. Below 15 percent the code is bulletproof but the logo gets too small to read on a printed business card or signage.

The right number depends on where the QR will be scanned:

  • Print at 20 mm or smaller (business cards, product labels) — keep the logo at 18 to 20 percent of the code's area. The logo cannot be more than about 4 mm wide on a 20 mm code, which means simplified marks work better than full wordmarks.
  • Print at 30 to 60 mm (menus, posters, packaging) — 22 to 25 percent is comfortable. Most company logos render readably in this size range.
  • Digital display (websites, slide decks, video) — go up to 25 percent. Screens generate consistent contrast that scanners handle well.
  • Outdoor signage (banners, billboards, event displays) — keep it conservative at 18 to 20 percent. Wind, glare, and viewing angle reduce effective scan reliability.

The math: at error correction H, the code can lose up to 30 percent of modules. A center logo does not actually destroy data uniformly — it covers a contiguous block, which is harder to recover from than scattered noise. Leaving a 5 to 10 percent margin between the logo and the theoretical maximum is the safe practice.

Which logo file format works (and which breaks scans)

Three things about the logo file affect whether the final code scans reliably.

Use a clean shape with a solid background. Logos with detailed gradients or photographic elements blur into the surrounding QR modules and confuse scanners. A solid-colored mark on a solid white circle or square reads cleanly. If your full logo is a wordmark with thin lines, make a simplified version — the icon, monogram, or initial — for QR use.

SVG and PNG with transparent background both work. SVG scales without pixelation and is the right choice if the QR will be printed. PNG with a transparent background works for web. Avoid JPG — its compression artifacts add noise around the logo edge that some scanners interpret as data modules.

Add a white padding ring around the logo. Even with high error correction, scanners need a clear visual gap between the QR pattern and the overlaid image. A 2 to 4 pixel white ring around the logo (or a white square the logo sits inside) makes the boundary obvious. Most generators add this automatically; if yours does not, build the ring into the logo file before uploading.

Create a logo QR code on MakeQR in two minutes

Open makeqr.daylab.dev. The editor loads with a URL field already focused. Paste your link first — if you upload the logo before the QR has data, the scanner check cannot run.

  1. Enter your destination — paste the URL, vCard, or text you want the QR to encode. The preview renders immediately.
  2. Switch error correction to H — find the customization panel and change the level from the default M to H. The pattern visibly densifies.
  3. Upload the logo — click the logo upload area and select your file. SVG or transparent PNG is best. The image drops into the center of the code with automatic white padding.
  4. Adjust logo size — drag the size slider until the logo fills 20 to 25 percent of the code visually. The preview updates in real time.
  5. Apply brand colors — the foreground (modules) and background can match your brand palette. Keep contrast at 3:1 or higher between foreground and background. Pure black on white scans most reliably; dark navy or charcoal on cream works almost as well.
  6. Test scan — point a phone camera at your screen before downloading. If two phones from different brands both decode the URL, the design is safe to print.
  7. Download — SVG for print, PNG for web, PDF for documents that need both.

Nothing leaves your browser during this flow. The QR is generated client-side and the logo is composited into the image locally. There is no upload step, no rendering server, and no account required.

Common mistakes that break logo QR codes

The five issues that account for most failed scans, in rough order of frequency:

Logo too large. Pushing past 30 percent on a hunch — "if 25 works, 35 should still work" — is the single most common cause. Error correction H caps at about 30 percent recoverable damage, and a contiguous center cover hits that ceiling fast.

Low contrast colors. A pastel QR on a slightly different pastel background looks subtle on screen and unscannable in print. Phone cameras need a 3:1 minimum contrast ratio between modules and background. Light blue on cream rarely makes it. Dark blue on cream works.

Inverted colors. Most scanners are trained on dark-modules-on-light-background. Reversing this — light modules on a dark background — works on newer phones but fails on older Android devices and in poor lighting. Stick to dark on light unless brand guidelines force otherwise, and test with multiple phones.

Missing quiet zone. The white margin around the QR (the "quiet zone") needs to be at least four modules wide on every side. Cropping right up to the code's edge breaks scanning even when everything inside the code is correct.

JPG logo with compression artifacts. Compressed edges around the logo look fuzzy under high resolution scanning and produce occasional misreads. Use SVG or PNG.

A logo on a QR makes sense for branded surfaces — packaging, business cards, menus, marketing collateral. It is the wrong choice in two specific situations.

Tiny print. If the code will be smaller than 15 mm square (some product labels, jewelry tags, watch faces), the logo eats the data budget. Keep the QR plain at small sizes.

Adversarial environments. If the code will be photographed at extreme angles, in heavy rain, or behind glass with reflections, every percent of error correction matters. A pure unbranded code with H-level correction has the best chance. Restaurant outdoor menus, gym equipment QRs, and parking meter codes belong in this category.

For everything else — the conference badge, the product box, the storefront window — a properly sized logo QR scans as reliably as a plain one and looks intentional rather than generic.

FAQ

Q. What error correction level should I use for a QR code with a logo?

A. Use error correction level H, which recovers up to about 30 percent of damaged modules. The default on most generators is M (about 15 percent recovery), which is not enough to reliably handle a center logo. Switching to H makes the QR pattern visibly denser but is the trade-off that keeps the code scannable. Levels L and Q exist between these extremes but are not recommended when an image overlay is involved.

Q. How much of the QR code can the logo cover?

A. Keep the logo to between 18 and 25 percent of the code's total surface area. Smaller than 15 percent works but makes the logo too tiny to read on print materials. Larger than 30 percent starts breaking scans even with error correction H, especially in low light or at scanning angles. The sweet spot for most uses is 20 to 22 percent — readable, branded, and reliably scannable.

Q. Does adding a logo to a QR code cost money?

A. No. The logo overlay is a client-side image composition step, not a server feature. Tools that gate the logo behind a paid plan are using it as a paywall, not because the math requires payment. MakeQR adds logos on the free tier with no watermark, no account, and unlimited use. Tools that ask for a sign-up before letting you add a logo are doing so for sales-funnel reasons.

Q. Can I use my full company wordmark instead of an icon?

A. You can, but a wordmark with thin letterforms covers more contiguous QR modules than a simple icon, which makes scanning harder. The general rule: simpler shapes scan better. If your brand has a separate icon or monogram alongside the wordmark, use that for QR codes. If you only have a wordmark, scale it down to the icon-equivalent size — readability of the logo is less important than scannability of the code.

Q. Will a logo QR code work on older phones?

A. Yes, as long as the device has any QR-capable camera app. Native QR scanning has shipped on iPhone since iOS 11 (released September 2017). On Android, scanning support varies by manufacturer and camera app — Pixel phones and most modern Android devices scan QR codes through the camera or Google Lens, but the experience is not as uniform as on iPhone. Older phones running third-party scanner apps also handle logo QR codes correctly when error correction is set to H. The risk is not the device — it is poorly designed codes that try to fit too large a logo or use low contrast colors.

Ready to create your QR code?

Try MakeQR for free — no sign-up, no watermark.

Create QR Code Free