QR code with a logo
A mark in the middle turns an anonymous pattern into something recognisably yours. It also destroys part of the symbol on purpose. This page is about where the line between those two things sits, and the generator below stays on the right side of it.
Generator with logo upload
Logo overlay (optional)
Set error correction to H, then upload an image under “Logo overlay” and leave the size slider near 20%. Nothing is uploaded: the logo is read and composited in your browser.
How to add a logo, step by step
Put your own logo in the middle of a QR code without making it unreadable: raise the error correction first, keep the image to a fifth of the width, leave the corners alone and scan it before you print it.
-
Paste the link
Put the full address, including https://, into the generator. A shorter link means a coarser pattern with fewer, larger modules, and a coarse pattern is what survives having a logo dropped on it.
-
Set error correction to H
Level H restores about 30% of the symbol and is the only level with room for a logo. Change it before you upload the image rather than after, so the preview you judge is the one you will download.
-
Upload the logo and keep it small
Choose an image under "Logo overlay" and leave the size slider at 20%. The three big squares in the corners must stay clear — the overlay is centred precisely so they do.
-
Test, then download
Scan the preview with two phones, one of them older, before you download. PNG carries the logo; SVG comes straight from the encoder without it and is the better file to hand a printer.
How much of the code a logo actually covers
A QR code carries far more modules than its content needs. The surplus is Reed–Solomon error correction — redundant data a decoder uses to rebuild the message when part of the pattern is missing. A logo spends that reserve, and the four levels differ only in how much of it there is to spend.
The percentages people quote are shares of the width, which is not what the code loses. This generator draws a white border around your image at 12% of its size on each edge, so a logo set to 20% blanks a square 6.2% of the symbol's area, and the 25% maximum blanks 9.6%. Both are comfortably inside level H's budget, which is deliberate: the damage sits in one solid block in the middle rather than scattered the way the encoding expects, and the rest of the reserve still has creases, glare and cheap ink to absorb.
| Level | Recoverable | What it is good for |
|---|---|---|
| L | about 7% | Screen only, no logo. Smallest symbol, no margin for anything going wrong. |
| M | about 15% | The sensible default for a plain code. Not enough budget for a logo. |
| Q | about 25% | A token mark at 10–12% of the width, and only on screen. |
| H | about 30% | What a logo needs. Tolerates one solid block in the middle plus real-world print damage. |
The tool warns you as soon as the covered share passes half of the level you have selected, so you can see the moment a design stops being safe rather than finding out on a poster.
Four rules that keep it scannable
- Raise error correction before you add the logo. A logo on level M often passes on a bright monitor and fails on paper, because there is nothing left over for the printing.
- Leave the three corner squares alone. Those are the finder patterns a scanner uses to locate and orient the symbol, and they are not protected by error correction. Cover one and the code is not read badly — it is not found at all.
- Keep the code dark on light, with its quiet zone. Inverted colours and a code butted up against artwork break more scans than logos do. Four modules of empty margin on every side, every time.
- Print bigger than you think. Level H adds modules, so a logo code is finer than a plain one at the same physical size. The size calculator gives you the minimum width for your scan distance.
PNG or SVG
The two download buttons produce genuinely different files. PNG is the canvas in front of you, logo included, and is what you want for a screen, a slide or an email. SVG is written straight from the encoder as pure vector geometry, which means it scales to any size without softening a single module edge — and that it does not contain the logo.
For print that division is a feature. Hand the printer the SVG, place your logo over the centre in the layout, and both halves of the artwork stay vector at whatever size the job ends up being. The longer route is explained in the guide on putting a logo in a QR code without breaking it, alongside the error correction levels and what colour and contrast cost you.
Common questions
What logo size does this generator allow?
The slider runs from 10% to 25% of the code's width and starts at 20%. Those are widths, not areas: with the white border the tool draws around the image, 20% blanks about 6.2% of the symbol and 25% blanks about 9.6%. A warning appears under the preview as soon as the covered share passes half of what your error correction level can restore.
Why does my downloaded SVG have no logo in it?
Because the two downloads come from different places. The PNG is the canvas you are looking at, logo composited in; the SVG is written straight from the encoder as clean vector geometry, which is the file a printer wants. Place the logo over the SVG in your layout tool and the whole artwork stays vector.
Can I use a logo with a transparent background?
Yes, and it will land on white: the generator paints a light rectangle behind the image before drawing it, so a transparent PNG does not leave code modules showing through the gaps in your mark. That border is also what gives the decoder a clean edge to work with.
Does the logo change what the code encodes?
No. Encoding happens first and the image is drawn over the finished symbol afterwards, so the URL is untouched — the scanner reconstructs the hidden modules from the error correction data. That is also why a logo can never add tracking or change the destination.
Carry on with the full generator