Design a QR code that matches your brand

Color, dot shape, corner shape, and a center logo. The encoded data never changes — only how it looks — so you can restyle without breaking anyone who already printed it.

What custom styling can safely change

A QR code has three finders (the big squares in three corners), a timing pattern, and roughly a thousand modules of encoded data. Styling touches the appearance of modules and colors. It cannot touch the data, and it cannot remove the finders — a scanner uses those to locate the code, work out its size, and figure out which way is up before it reads anything else.

That is why the safest custom codes change color and module geometry and leave everything else alone. The most fragile ones replace the finder squares with circles, thin the modules to outlines, or shrink the quiet margin to fit a design. All three can work. None of them work reliably at 2 cm.

The five dot shapes, ranked by tolerance

Tolerance here means how much of the code a scanner has to resolve before it fails. Square modules share edges with their neighbours, so there is no diagonal gap to resolve between them. Circles have diagonal gaps everywhere, which is why they need more physical size.

1

Square

The reference look. Highest tolerance, prints smallest. Safe default for anything under 3 cm.

2

Rounded

Softened module corners. Reads as designed without giving up much scan tolerance.

3

Dots

Circular modules. Needs 4 cm or larger in print; reliable on current phone cameras.

4

Classy

Only the outer corners of each module round. A hybrid that sits between square and dots.

5

Extra rounded

Full circles. The most decorative option here, and the least forgiving at small sizes.

Colors: the one rule that matters

The dot color must be clearly darker than the background. Not "different," not "on-brand" —clearly darker. Scanners need a sharp luminance step at every module edge. This generator measures the pair and tells you the contrast ratio before you download, and it blocks the export when the pair is too flat to scan, because a beautiful code that does not scan is not a design.

The inverted case — white code on black — works, with roughly 18:1 contrast. What changes is scanner behavior, not legibility: most phone cameras detect and invert the pattern, which costs a fraction of a second and fails more often at small sizes and in glare.

Center logos and error correction

Every QR code carries redundant data — the error correction level is how much of it can be lost and still decode. Low recovers about 7%, Medium 15%, Quartile 25%, High 30%. Covering modules with a logo is exactly the case that redundancy exists for, so adding a logo here automatically raises the level to High.

The practical ceiling is around a quarter of the code width. Past that, even High correction runs out of redundancy and the code starts failing intermittently — the worst kind of failure, because it works when you test it. A white rounded pad behind the logo helps by clearing the modules it covers cleanly.

Custom QR design questions

Do stylized QR codes still work with every scanner app?

The native camera apps on current iOS and Android handle all five dot shapes at 4 cm and up. Some older third-party scanner apps assume square modules and struggle. Test the printed piece with the phones your audience actually uses.

Will a custom code hold as much data?

Yes. Styling is applied after encoding, so a styled code carries exactly as much as the plain version of the same content.

Can I restyle a code I already printed?

Only if the printed copy has a URL shortener in the middle. A direct link baked into the code cannot be restyled without reprinting — that is the one trade-off static codes carry.

Is my uploaded logo sent anywhere?

No. It is read with the browser's local file API and turned into an inline image inside the SVG. Nothing is uploaded, which is also why there is no logo hosting to worry about.

Why did the download button gray out?

The color pair you picked fell below the minimum contrast a scanner can lock onto. Widen the gap between dot and background color and it re-enables.

Pick a style and start from it

Each preset opens the generator already set to those colors and shapes.