Embed a logo into QR codes with error correction to maintain scannability and brand identity.
Scanners never see your logo. A QR reader digitizes the grid of dark and light modules; the modules your logo covers are simply read as errors, which the code's error correction exists to repair. This tool encodes your text, applies a high error-correction level, and keeps your logo in the center, clear of the corner finder patterns scanners lock onto. The surprise most people hit: a logo that works on a poster can fail on a business card, because the same logo covers a larger share of the modules when the code is printed smaller. Nothing leaves your browser.
A concrete input and expected output from the current implementation.
Input
Text: https://example.com. Logo: logo.png. Error correction level: H.
Expected output
A version 3 QR code - 29 by 29 modules - at error-correction level H, with the logo centered. The 19 lowercase characters force byte mode, which needs 164 bits: 4 for the mode indicator, 8 for the character count, 152 for the data. Level H leaves a version 2 code only 16 data codewords (128 bits), so the output steps up to version 3, whose 26 data codewords hold 208 bits; 44 of its 70 codewords are reserved for error correction.
Level H's heavy error-correction overhead leaves version 2 too little room for 19 bytes, so the code grows to version 3. The larger grid matters for the logo too: 29 modules means the same logo covers a smaller fraction of the code, which is what keeps it scannable.
QR codes reserve a fixed share of their codewords for error repair, at four levels: L, M, Q and H - roughly 7%, 15%, 25% and 30% of codewords. The tool encodes your text and then spends part of that correction budget on the logo. Higher levels squeeze data capacity - a long URL at level H can force a larger version - but they are what make the logo possible.
Error-correction codewords are interleaved with the data, so a burst of damage - a logo - is rebuilt from the surviving codewords. But three structures are never recoverable: the corner finder patterns that scanners lock onto, the timing patterns, and the quiet zone - the white border around the code. The tool keeps the logo centered, clear of all three, usually with a white or outlined pad so its edges read as clean modules rather than blur.
Within limits. Level H tolerates roughly 30% of codewords in error, so a centered logo covering about a fifth to a quarter of the module area usually still scans - but every extra pixel eats margin that also has to absorb print blur and bad lighting. If you need a large logo, use a code with more modules, or encode less text.
The data did not change - the protection did. The tool raises the error-correction level, which reserves more codewords for repair and leaves fewer for data; for longer inputs that pushes the code to a larger version, which prints smaller, denser modules. That is the price of blending a logo in.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.