QR Designer
Embed your logo in a QR code with custom colors — error-correction and contrast guardrails keep it scannable, all on this device.
Version 3 · 29×29 modules
No logo embedded
Scannability 100/100 — good
- Contrast −0
- Logo coverage −0
- Error correction −0
- Module shape −0
The score is a heuristic, not a guarantee — scan the downloaded file back before a production run.
Print test: scan the downloaded file with a phone camera; the related QR reader tool runs the same check on this device.
The link carries your text and style settings only — the logo image stays on this device.
Press ? for shortcuts
Do it offline:$ qrencode -l H -t SVG -o qr.svg 'https://example.com'
How to use it
- Paste the link or text, then drop a logo onto the design pane — PNG, JPEG, WebP or SVG up to 2 MB, rasterized and embedded locally.
- Size the logo with the slider, 15 to 30 percent of the symbol width — the box snaps to whole modules and stays under 9 percent of the area.
- Style the modules — square, rounded or dots — and pick colors; warning chips appear the moment a choice turns risky.
- Read the meter, then download the SVG or a PNG preset — and scan the file back with a phone before a production run.
Drop your logo into the middle of a QR code and keep it scannable. Error correction defaults to H, the logo box is capped at 30 percent of the symbol's width and held away from the finder squares, and a scannability meter prices every choice instead of hiding the cost. Download SVG or PNG; the image is embedded entirely on this device.
How it works
A QR symbol carries your data plus Reed–Solomon recovery codewords, and at level H that reserve can rebuild about 30 percent of the codewords (ISO/IEC 18004). A logo is deliberate damage: covered modules read as noise and are reconstructed from the reserve. That is the whole trick — and the reserve must not be spent twice, because dirt, glare and print loss draw from the same budget.
The budget becomes geometry. The box is centered, snapped to whole modules, and capped at 30 percent of the width — 0.30 squared is 0.09, so it never takes more than 9 percent of the area, a comfortable fraction of what H can rebuild. A logo always consumes error-correction margin — the meter shows the cost rather than hiding it; picking L or M under a logo draws a warning because a 7 or 15 percent reserve is mostly gone once the overlay lands.
Some regions get no protection: the finder squares, their format strips and the timing lines are how a camera orients the grid before error correction even runs, so damage there blinds the reader outright. The box keeps its near edge nine modules clear of every corner, and on small symbols it refuses to grow. Central alignment patterns may be covered — they are sampling aids, not data, and level H's recovery budget is what absorbs their loss.
Examples
https://example.comScannability 95/100 (good) · version 3 · square modules · logo box 6×6 (4.3% of the symbol) at level HThe everyday case: a short address at H yields a version 3 symbol — a 6×6 box covering 4.3 percent against the 9 percent ceiling.
https://example.com/cafeScannability 92/100 (good) · version 3 · rounded modules · logo box 6×6 (4.3% of the symbol) at level HBrand styling priced honestly: rounded modules cost three points, and the blue-on-off-white pair measures 5.77:1 — above the 4:1 floor, so no contrast chip.
https://example.com/spring-menuScannability 77/100 (warn) · version 4 · dots modules · logo box 9×9 (7.4% of the symbol) at level H
Dot modules shrink every mark — some scanners lose the grid, especially in print; test a real scan before production.
The logo box covers 7.4% of the symbol — close to the 9% ceiling; keep error correction at H and test a scan.The warning case: dots at full width trip two chips and drop to the warn band. The scannability score is a heuristic, not a guarantee — print the file and scan it back.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
The only real test is a scan
Point a phone camera at the downloaded file, on screen and on paper. The related QR code reader tool runs the same check on this device — a meter only estimates what real optics do.
Why the ceiling is 9 percent
Area grows with the square of width: 0.30 × 0.30 = 0.09. H rebuilds about 30 percent of codewords, so the cap spends under a third of the budget — bigger overlays make codes that pass a desk test and fail on a shelf.
Inverted colors are a scanner lottery
Light modules on a dark background draw a warning even at perfect contrast — many reader apps only try the dark-on-light polarity. Test on several phones first, or invert the surrounding artwork instead.
SVG logos are flattened before embedding
An SVG can carry scripts and remote references, so its markup never enters your download. The designer draws it onto a canvas on this device and embeds the pixels — the exported file stays self-contained, nothing executable, no links out.
Common errors
Logo size 0.5 is outside the 0.15–0.3 range (15–30% of the symbol width).- The slider cannot produce this — it guards shared links and drafts that bypass it. Below 15 percent a printed logo turns to mush; above 30 percent the covered area passes 9 percent, where the recovery math stops being comfortable.
Too long for a QR code at error-correction H (max ≈1,273 bytes) — shorten the text or lower error correction (L allows ≈2,953 bytes).- H has the smallest byte ceiling because two thirds of the symbol is recovery data — the reserve the logo depends on. Dropping the level buys capacity and costs overlay budget; for long content, encode an address instead.
FAQ
Will the QR code still scan with a logo in it?
That is what the guardrails protect: H rebuilds covered modules, the box avoids the finder squares, and coverage stays under 9 percent. Treat the meter as a pre-flight check — the decisive test is scanning the file with more than one phone.
Is my logo uploaded when it is embedded?
No. The image is read, resized and embedded by code in this tab; the share link has no field for it at all. Check rather than trust: keep the browser's Network panel open while attaching and downloading.
Which error-correction level works with a logo?
H, the default: about two thirds of its codewords are recovery, tolerating roughly 30 percent damage — exactly what a logo inflicts. A warning appears the moment L or M meets an overlay.
Why does the logo box shrink on small codes?
The law keeps the box nine modules clear of every finder corner — a 21-module symbol has room for a 3×3 box no matter what the slider asks. A note under the preview says when the request was clamped; longer content makes room.