QR Code with Logo

Error correction level H is required when embedding a logo because the logo physically covers a portion of the code's data modules, which the decoder must reconstruct from redundancy alone. The QR code standard defines four Reed-Solomon error correction levels: L (7% recovery), M (15%), Q (25%), and H (30%). Level H means the code can recover from up to 30% of its data area being damaged, missing, or obscured — the highest tolerance the standard allows. When a logo is placed in the center, it obscures roughly 10–20% of the total module area depending on the logo's size relative to the code. At error correction level L, even a small logo would exceed the 7% recovery budget and make the code unreadable. At level H, there is enough redundancy headroom to survive the logo obstruction and still provide a margin for the decoder to handle scan angle, lighting variation, and minor print imperfections simultaneously. This is why every reputable QR-with-logo generator defaults to level H — it is not optional for reliable scanning. The trade-off is that level H generates more data modules than lower levels for the same payload, meaning the QR code will be denser and require a slightly higher minimum print size to remain scannable. All QR code generation runs entirely in your browser using the qrcode.js library — no data leaves your device. As a practical tip, always test the finished QR code by scanning it with at least two different smartphone apps before distributing it in print or digital materials.

The logo should occupy no more than 20–25% of the total QR code area to stay within the error correction recovery budget at level H. Since QR codes are square, this translates to a logo width and height of roughly 20–22% of the QR code's side length. For example, if the QR code is 400×400 pixels, the logo should be no wider than approximately 80–88 pixels. Going beyond 25% of the total area risks pushing the obscured module count above the 30% recovery ceiling that level H provides, which will cause intermittent scan failures, particularly with older or less sophisticated QR readers. The logo should also be centered, because the center region of a QR code contains the densest redundancy-weighted modules and is the most favorable position for obstruction. Avoid rectangular logos with extreme aspect ratios — a logo that is very wide but short will obscure a disproportionate horizontal band and may corrupt the timing pattern strips that run between the finder squares. If your logo contains fine detail or small text, simplify it before embedding: detail that is clear at large sizes may become visually muddy at the small scale of a QR center graphic. A simple icon, monogram, or circular crop of a logo works best. All QR rendering runs entirely in your browser — no data leaves your device. As a practical tip, upload a PNG logo with a transparent background so the logo composites cleanly onto the QR code's white modules without adding a rectangular white box that further obscures surrounding modules.

Yes, colored logos on colored QR codes work, but maintaining sufficient contrast between the dark modules and the background is critical for reliable scanning. The QR code standard requires a minimum contrast ratio between the module color and the background for decoders to correctly binarize the image — that is, to distinguish a dark module from a light one. Most QR reading algorithms apply an adaptive threshold to the luminance channel, meaning they compare local luminance values rather than absolute colors. As long as the dark modules are significantly darker in luminance than the background modules, color choices do not affect decoding. Problems arise when the dark and light colors have similar perceived brightness — for example, a medium blue on medium green — even if they look distinct in hue. A safe rule is that your dark module color should have a luminance value at least 40–50% lower than your background when converted to grayscale. The logo color is less critical because the logo sits in the error-correction recovery zone, but if the logo colors closely match the dark modules, the logo edges can blend into surrounding modules and effectively expand the obscured area beyond the intended boundary. All generation runs entirely in your browser — no data leaves your device. As a practical tip, before finalizing any colored QR code, convert a screenshot of it to grayscale in any image viewer and check that the module grid is still clearly visible — if it is, the scanner will have no trouble reading it.

The right format depends on how you intend to use the QR code. PNG is a raster format: the exported file contains a fixed grid of pixels at the resolution you specified, and enlarging it beyond that resolution will cause visible pixelation. PNG is the correct choice for use cases where the QR code will be displayed at a known, fixed size — a website, a social media post, an email signature, or a digital screen at a specific pixel dimension. Exporting at 2× or 3× your intended display size provides adequate sharpness on high-DPI retina screens. SVG is a vector format: the QR code is described as geometric shapes — typically filled rectangles for each module — which can be scaled to any size with perfect sharpness, from a postage stamp to a billboard. SVG is the correct choice for print production, where the file will be placed in a layout application like Illustrator, InDesign, or Affinity Publisher and potentially resized. Print requires a minimum of 300 DPI at the final output size; a vector SVG satisfies this regardless of scale. SVG files can also be opened and edited in vector editors, allowing you to change colors or embed the code into larger artwork. Note that if the QR code has a raster logo embedded, that logo element within the SVG will still be pixel-based and may not scale cleanly. All generation runs entirely in your browser — no data leaves your device. As a practical tip, if in doubt, download the SVG — it is universally more flexible and you can always rasterize it at any target resolution later.