Guide · OtterQR

Put your logo in the middle of a QR code

A plain black square tells nobody whose it is. A small mark in the middle does, and a QR code has enough redundancy built in to survive it.

Open OtterQR →

Add it

Open qr.ottercraft.dev and put in whatever the code should hold.
Scroll to the Logo card and drop a picture on it, or choose one from your device. PNG, JPG and SVG all work, and a PNG with a transparent background usually looks best.
Error correction jumps to High on its own, because that is the setting that lets the missing part be rebuilt.
Adjust Size, Clear space and Shape until it looks right, then download.

How big can it be

The slider stops at 30% of the width, and 30% is further than you should usually go. Somewhere between 15% and 20% is the sweet spot: big enough to recognise, small enough that the code shrugs it off. Test any code with a logo on it with an actual phone before you commit it to print, and test it at the size you are going to print it.

High error correction can rebuild roughly 30% of a damaged code, but that budget is shared. A logo in the middle, a scuff on a sticker, a bad camera angle and poor light all draw from the same pot.

The modules underneath are removed, not covered

Most tools paint the logo on top of a finished code. OtterQR leaves the squares under the logo undrawn in the first place, which has two useful effects. A code on a transparent background still reads, because there is no half-covered square showing through from behind. And the white plate behind the logo becomes a design choice rather than a requirement, so you can turn it off when the logo already has its own shape.

Choosing a picture

Simple beats detailed. At two centimetres across, a wordmark with thin letters turns to mush.
A square or circular mark fills the space better than a long horizontal logo, which has to shrink to fit and ends up tiny.
Contrast matters here too. A pale logo on a white plate disappears.
The picture is read straight off your device, shrunk to 512 pixels and kept in your browser so it is still there next time. It is never uploaded.

Things worth knowing

If a scan fails, shrink the logo first. It is almost always the size, not the picture.
Keep the empty margin around the code. Squeezing that to make room for a bigger logo is the worst trade you can make.
The SVG download has the logo embedded inside it, so the file stands on its own with nothing to link to.