QR Code with Logo – free, verified before you download

Generate the QR code as usual, then open Style & size and choose Add logo. Pick a PNG, JPG or SVG file — a square logo on a plain or transparent background works best. The logo is placed on a small white (or matching-color) panel over the center of the pattern, sized to at most a fifth of the code's width. That cap exists because a QR code can only lose so many modules before the data underneath becomes unrecoverable.

The moment a logo covers part of the pattern, error correction jumps to H (recovers roughly 30% of damaged data) automatically — you don't need to set this yourself. Higher error correction means a denser code, so the safe minimum print size goes up compared with a plain code carrying the same data.

After the logo is placed, the page renders the finished QR code to an image and decodes it with jsQR, an open-source reader, entirely on your device. The line under the preview shows exactly what a scanner reads back. If the logo is too large, the contrast too low, or the background too busy, you get a warning before you ever download a file — not after 500 flyers come back from the printer.

This check catches the most common failure mode reported by designers: a logo that looks fine on screen but sits on top of a finder pattern (the three large squares in the corners) or removes so many modules that the decoder gives up. Move or shrink the logo until the confirmation line turns green.

Because a logo forces error correction H and a smaller effective data area, print logo codes larger than you would a plain one carrying the same information — add at least 20% to the minimum size. For print at 300 DPI, a 3 cm code needs roughly 354 × 354 pixels (size in cm ÷ 2.54 × 300); download SVG instead and this stops mattering, since it scales without ever pixelating.

A logo eats into the same space the data uses, so how much room is left over depends on what the code already encodes. A short website URL or a phone number leaves plenty of margin even at error correction H, so a logo barely changes the printed size you'd need anyway. A dense payload — a long tracking link, a full vCard with several fields, or a Wi-Fi network with a long password — is already close to its size limit before a logo is added, and stacking a logo on top pushes the minimum print size up noticeably. If a code needs both a logo and a lot of data, plan on a bigger print area from the start rather than shrinking the logo to compensate.

The logo itself matters too. A simple, high-contrast mark — a wordmark reduced to a monogram, a single-color icon, a silhouette — survives the compositing step far better than a detailed multi-color emblem with thin lines or gradients, which tends to blur into a gray blob at the small size a QR panel allows. If your brand mark has fine detail, use a simplified version just for the QR logo rather than the full asset.

Using a full-color photo instead of a simple logo mark — photos have too much fine detail and almost always fail to scan once compressed into a QR panel. Setting the background of the logo panel to a color close to the code's background, which erases the contrast a scanner needs. Resizing the logo up after export, which blurs a PNG; export SVG if you need to resize later. And skipping the confirmation step because the preview 'looks fine' — a design that looks fine to a human eye can still be unreadable to a camera at an angle or in poor light.

One more: designing the logo placement around a single test phone. A code that scans instantly on a new iPhone with a good camera can still stump an older Android phone with a slower autofocus, especially under fluorescent store lighting. If the code will be scanned by the general public rather than a controlled audience, test on the oldest, cheapest phone you have access to — that's closer to a worst-case scan than testing on whatever phone happens to be on your desk.