A logo in the middle, and it still scans.

Why logos work at all

QR codes carry error correction: at level H, about 30 percent of the code can be covered or damaged and it still reads. A centred logo spends part of that budget, and everything else that goes wrong in the real world spends the rest. This page raises the level to H when you add a picture, clears the modules under it, keeps the corner finder patterns untouched, and stops you once the logo would hide more than a fifth of the code.

A logo can only occupy a whole odd number of modules, so on a small code the sizes it can be are a short staircase. The Size control steps through that staircase, one position per size the code can actually produce, and the readout names each as a share of the code's width; every step changes the logo, and nothing on the slider is a dead spot. In Advanced the readout also says how much of the code the logo hides, which is the number the warnings are set against.

The crop box under the logo is the blank space in the middle of the code. Drag it to choose what goes there and drag its corner to change its size and shape: the space is cut to the box's shape, so a wordmark cropped to its mark gets a square space, and a logo exported with padding all round can be tightened until it fills what it is given. An SVG logo cropped this way is still a drawing in the SVG download.

No logo file to hand? Pick one of the built-in icons instead: website, WiFi, email, phone, text message, calendar, contact, location, document, menu, video, or review. They are drawn in the code colour, follow it when it changes, and stay vector in the SVG download. Because an icon is a name rather than a picture, it also travels in a share link, which an uploaded logo does not.

PNG, JPEG, WebP, and SVG all work. An SVG stays vector the whole way through, so the SVG download holds your logo as real curves for a print shop to scale, rather than a picture of it. Uploaded SVGs are rebuilt in your browser first: script, animation, and anything pointing at a file on the internet are stripped out, styles are baked onto the shapes they belong to, and the drawing is held inside its own box. You are told what was changed.

Get the most from a logo

• Use a square or round version of your logo if you have one, such as the icon or monogram, or crop the box down to that part of a wordmark. A wide logo is fitted to the width of the space, so it comes out short and hard to read at arm's length.
• Give a logo with a transparent background a solid version if it disappears against the code colour: the clear space is the background colour, so a dark logo on a dark background vanishes.
• Watch the readout rather than the slider. Amber means error correction is doing most of the work; red means the download is locked until you shrink it.
• Leave the clear space behind the logo on. It gives the scanner a clean edge to work with. Turning it off paints the logo straight over the modules, which looks busier and asks more of the scan.
• A longer link makes a denser code, which has more modules to spare, so the same logo hides proportionally less. Shortening the content is the other way to make room.
• Convert text in an SVG to outlines before uploading. Live text falls back to whatever font the reader has, which is rarely yours.
• Watch the badge: the code is decoded on your device every time you change something. If it says "did not decode", shrink the logo or add a module of margin.
• Higher error correction makes the code denser, so check the print size panel again after adding the logo.