How to Make a QR Code with a Logo

Why add a logo to a QR code

A plain black-and-white QR code works, but it does not communicate who it belongs to. Adding a logo to the centre tells the scanner — and more importantly, the person holding the phone — that this code is from your brand. It builds trust before the scan happens.

Logo QR codes are common on business cards, product packaging, table cards, event signage, and marketing materials where brand recognition matters. The code still functions as a standard QR code; the logo is a visual layer that sits over the centre of the matrix.

How logo overlay works

A QR code includes built-in error correction. When error correction is set to level H (the highest), the code can recover from up to 30% data loss. The generator uses this property to place a logo over the centre modules — the area with the most redundancy — without breaking the code's ability to be scanned.

When you upload a logo, the generator automatically promotes error correction from your current setting to H. This happens silently because any lower level would not tolerate the overlay. If you remove the logo, error correction reverts to your previous setting.

The logo is composited onto the rendered QR canvas using standard browser drawing. The QR matrix is rendered first, then the logo is drawn on top. No QR modules are deleted or re-encoded — the logo simply covers them, and the H-level error correction compensates.

Step-by-step: adding a logo

1. Open the QR Code Generator.

2. Paste the URL or text you want to encode. The code preview updates live.

3. Click the logo upload area or drag a logo file onto it. Accepted formats: PNG, JPG, WebP, SVG.

4. The code re-renders immediately with the logo centred. Error correction auto-promotes to H.

5. Adjust the logo size if needed. The slider ranges from 10% to 25% of the QR area. The default 18% is a safe starting point.

6. Toggle the white halo on or off. The halo adds a white background rectangle behind the logo for visual separation. It is on by default.

7. Adjust foreground and background colours if you want branded colours. Keep the contrast ratio high — dark foreground on light background scans most reliably.

8. Download the result as PNG (for screens and standard print) or SVG (for vector-quality print at any scale).

Choosing a safe logo size

The safe range depends on the error correction level and the amount of data encoded:

• 10–18% of the QR area is safe for most URLs and text payloads. This is where the default sits.
• 19–22% works for short URLs but may cause scan failures with longer payloads or low-contrast colour combinations.
• 23–25% is the upper end of the slider. Use this only for very short payloads (under ~50 characters) and test thoroughly.

The generator does not block you from using the full slider range, but it does run a post-render decode verification. If the generated code cannot be decoded by the built-in scanner, the download buttons are disabled and a warning appears. This prevents you from saving an unscannable code.

Contrast and colour

The QR code's foreground and background colours affect scan reliability independently of the logo:

• High contrast is always safer. Dark foreground on white or very light background is the most reliable combination.
• The generator shows a contrast warning when the foreground/background colour pair drops below a readable threshold. The warning is informational — it does not block generation — but you should take it seriously for printed codes.
• Logo colours matter too. A dark logo on a dark QR foreground can blend into the matrix and confuse scanners. If your logo has a dark palette, keep the halo on so the white rectangle separates it from the QR modules.

The white halo

The halo is a white rectangle drawn behind the logo before the logo itself is composited. It creates a clear visual boundary between the logo and the surrounding QR modules.

• On by default. Most logos look better and scan more reliably with the halo active.
• Turn it off only if your logo already has a built-in white or transparent border, or if the visual effect does not match your brand style.
• The halo does not change the logo's coverage area. The halo fills the same bounding box as the logo — it does not extend beyond it.

Testing before printing

Always test a logo QR code before committing to print:

• Scan with at least two phones (iOS and Android). Camera apps handle QR codes differently; a logo that scans on one may not scan on another at the same size.
• Test at the intended print size. A 2 cm code with a logo is harder to scan than a 5 cm code. If the code will be printed small (business cards, small labels), consider removing the logo or reducing it to 10%.
• Test at the expected viewing distance. A poster code scanned from 1 metre is different from a table card scanned from 30 cm.
• Check the quiet zone. The white border around the QR matrix must not be cropped. The generator sets a minimum of 4 modules; do not trim it in your layout software.

PNG vs SVG output

Both formats preserve the logo overlay:

• PNG is a raster image. Good for screens, emails, and standard-resolution print. The downloaded PNG matches the canvas size you set (128–1024 px).
• SVG is a vector format. Good for high-resolution print at any physical size — posters, banners, vehicle wraps. The SVG scales without pixelation.

If you are printing at large scale, use SVG. If you are embedding the code in a digital document, slide deck, or email, PNG is simpler.

What logo QR codes do not do

This tool produces static QR codes with a visual logo overlay. It does not:

• Track scans. There is no analytics, redirect service, or scan counter behind the code.
• Edit after generation. The URL is encoded into the matrix. Changing the URL requires generating a new code.
• Host the logo or the code. You download the file; nothing is stored on the server.
• Guarantee scan reliability at all sizes and colours. The post-render verification catches most failures, but real-world conditions (curved surfaces, poor lighting, damaged print) can still cause issues. Always test.

Related guides

• QR Code Generator guide — full overview of the tool, all settings, and output formats.
• How to Create a QR Code for a Website URL — step-by-step for encoding a website link.
• QR Codes for Small Business — practical use cases for menus, business cards, packaging, and more.
• How to Make a QR Code for a File — encoding a link to a hosted file (PDF, image, ZIP).