QR Code Generator with Logo: Add Branding Without Breaking Scans

A QR code with your logo in the middle is a small design job with one hard constraint: the phone still has to read it. By the end of this guide you will know how big the logo can be, where it goes, which colors are safe, what the module and eye shape settings do, how to add a frame with a label, and how to test the result on both iOS and Android before it goes to print. The steps use the design studio at /advanced-studio, but the rules apply to any generator.

Why a logo works at all

A QR code carries spare data for error correction, defined by ISO/IEC 18004. The four levels, L, M, Q and H, let a reader recover roughly 7%, 15%, 25% and 30% of the modules if they are damaged, dirty or covered. A logo is deliberate damage: it covers modules in the center, and the reader reconstructs what is underneath from the spare data. That gives you the two numbers that govern everything else. The logo may cover no more than about 20 to 30% of the code area, and the code needs error correction Q or H to survive it. Higher levels make the pattern denser, so a logo also costs you print size, covered in the sizing section below.

Logo size versus error correction

The spare data is a budget. Whatever the logo spends, nothing else can: a scratch, a fold, a smudge on the phone lens or a slightly blurred print all draw from the same pool. Keep a margin.

Coverage means the square area of the logo, including its background plate, divided by the area of the code without the quiet zone. A logo one third of the code's width covers about 11% of its area; at half the width it covers 25%. Half the width is the practical ceiling, and only at level H.

Use H for anything with a logo that will be printed. The extra density is a fair trade for a code that still scans after a week on a shop counter.

Where to place it

Put the logo in the center. The three large squares in the corners are the finder patterns; the reader uses them to locate and orient the code, and no amount of error correction recovers a missing one. The smaller squares are alignment patterns (a small code has one near the bottom right corner; a dense code has several, some nearer the middle), and the single lines of alternating modules running between the finders are timing patterns. The finders and timing patterns sit on the edges, so a centered logo avoids them; a covered alignment pattern in the interior is ordinary damage that error correction absorbs.

Give the logo a solid background plate in the code's background color, usually white, with a small margin around the artwork. A logo dropped in with transparency leaves partial modules showing through its edges, which confuse the reader more than a clean rectangle of covered modules would. A rounded plate or a circle is fine; the reader only cares that the boundary is clean.

Do not put the logo in a corner, stretch it across the code, or repeat it: each either hits a finder pattern or spends the error budget twice.

Color and contrast rules

Readers look for dark modules on a light background. You have room to move within that, and not much beyond it.

• Contrast between module color and background must be at least 4.5:1. Black on white is 21:1. A navy or dark green on white passes easily; a mid-blue, orange or gold on white fails.
• Keep the modules darker than the background. An inverted code, light on dark, scans on some phones and not others. If your brand demands it, test on several devices before printing, and expect to lose some scans.
• The quiet zone must be the background color, at least four modules wide on every side. A brand color behind the whole code, with a white plate for the code itself, works; the code printed straight onto a colored photo does not.
• A gradient across the modules is fine when every stop clears the bar, and only then. A gradient always leaves part of the pattern lighter than the rest, and the weakest part decides whether it scans, so the studio scores the palest stop rather than an average and keeps its own curated gradients dark at both ends. A two-tone code mixed by hand is the same problem without the guard rail.
• The logo itself can be any color. It is covered territory; only its plate and its edge matter.

The studio shows the contrast ratio and a scannability score as you pick colors. If the score drops when you change a color, the color is the reason.

Module shapes, eye shapes and frames

These settings change how the code looks without changing what it says. Each has a safe range.

Module shape. Three options: Square, Rounded and Circle. Square is the reference and scans best. Rounded keeps each module's footprint and softens the corners, and scans about as well. Circle shrinks each module's dark area, which reduces contrast at small print sizes; use it on codes printed at 3 cm or larger, and confirm with a test. Diamond modules are deliberately not offered. They carry about half the ink of a square, and in testing they failed to decode every time.

Eye shape. The three finder patterns can be Square, Rounded, Circle, or Rounded with a dot pupil. Readers tolerate all four because they look for the 1:1:3:1:1 ratio of dark and light bands through the center of each eye, which every shape preserves. Match the eye shape to the module shape and the result looks intentional rather than assembled; rounded eyes with a dot pupil against rounded modules is the softest combination that still reads as a QR code.

Frame. Options are None, Label below, Label above and Outline. The label frames add a bar carrying your text above or below the code; Outline draws a border around it. All of them sit outside the quiet zone, so they cost nothing in scannability, and they separate the code from surrounding artwork so a designer does not crowd it. Frames that paint bars across the code itself, or that eat into the quiet zone, were removed for exactly that reason.

Call-to-action label. The field is empty to begin with, and an empty field means no label is drawn at all; the "Scan me!" you see in it is placeholder text, not a default. Type the outcome instead: "Scan for the menu," "Scan to join WiFi," "Scan to leave a review." Keep it under about 25 characters so it stays readable at the frame's text size.

Step by step in the design studio

1. Open /advanced-studio. Paste the URL, or pick the code type and fill in the fields. Keep a URL under about 80 characters; a long tracking link adds modules the logo will then have to compete with.
2. Leave error correction alone for now. Uploading a logo at step 4 forces the level to H and disables the control while the logo is there, because a cleared pocket in the middle of the code needs that headroom to survive. Removing the logo restores whatever you had picked.
3. Set the foreground to your dark brand color, or take one of the curated gradients, and the background to white or your lightest brand color. Check the contrast ratio reads 4.5:1 or higher; under a gradient that figure is the palest stop, not an average.
4. Upload the logo. PNG, JPEG or SVG up to 2 MB. Use an SVG or a PNG with a transparent background if you have one, and prefer the logo mark over a wide wordmark, since a wide shape wastes the square plate.
5. Watch the scannability score after the logo lands. If it drops into the warning band, the logo is too large for the code's density; use a simpler logo or shorten the content.
6. Choose a module shape and matching eye shape. Start with Rounded for both if you want a softer look.
7. Add a frame and label if the code will sit on a poster, menu or table tent.
8. Set the export size. Use 1024 pixels for PNG, or download SVG or PDF for anything a print shop will handle. Read QR codes for print for file-format detail.
9. Download the file. Do not add the logo, colors or frame afterwards in a design app; the studio accounts for them in the error budget, an overlay added later does not.

Testing on iOS and Android

Test the downloaded file, not the on-screen preview. Two checks cover nearly everything.

Decode the file. Drop the exported PNG or SVG into the QR code tester. It reads the exact file and shows what it contains, flags plain HTTP, and warns about shortened links or content long enough to need a larger print. If the tester cannot read it, no phone will.

Scan it with phones. Print the code at the intended size on ordinary office paper, then scan it with an iPhone using the built-in Camera app and with an Android phone using its camera or Google Lens. Hold each phone at the real distance, then at twice that distance, then at an angle of about 30 degrees, and once more under dim light. A branded code that needs the phone held perfectly still is not finished. If either phone hesitates, drop the logo one size or move from Circle modules back to Rounded, then test again.

If you can borrow an older phone, test on that too; newer cameras are more forgiving than the ones some customers carry.

Sizing a branded code

A logo raises the error correction level, and a higher level means a denser code, so a branded code needs to print larger than a plain one with the same content. The rule of thumb is that the code should be at least one tenth of the scanning distance, before adding a margin for the logo. A business card read from 25 cm needs about 2.5 cm; add roughly 15% for a logo and call it 3 cm. Use the size calculator, which has a logo checkbox, to get the number for your content and distance.

Common failures and fixes

The code scans on screen but not in print. The PNG was exported small and scaled up, softening module edges. Export at 1024 pixels or use SVG.

The code scans from straight on but not at an angle. Contrast is marginal. Darken the foreground color; aim well above 4.5:1 rather than exactly at it.

The logo looks fine but the code will not read. The logo is over budget, or it has a transparent edge exposing half-modules. Add a solid plate with a margin, shrink the logo, and confirm error correction is H.

The code reads on one phone and not the other. Usually an inverted color scheme or Circle modules at a small size. Return to dark on light, or Rounded modules, and retest.

Adding the logo made the code visibly bigger. That is level H doing its job; the code grew in modules to hold the spare data. Shorten the content if you can, otherwise print at the larger size.

The designer moved the logo off-center for balance. Move it back. Off-center placement risks the alignment pattern and looks like a mistake to anyone who knows what a QR code is.

The frame text is unreadable at print size. Shorten the label and let the frame's own type size stand; do not shrink the code to make room.

FAQ

Can I use a full-color logo? Yes. The logo's colors are irrelevant to scanning; only its size, its plate and the code's own contrast matter.

Does a logo make the code expire or need a subscription? No. A static code with a logo is an image like any other. It has no account behind it and works as long as the destination does.

Can I add a logo to a WiFi or vCard code? Yes, but those payloads are longer than a URL, so the code is already dense. Keep the logo small and error correction at H, and test the printed result.

Should I use a gradient to match my brand? Within limits, yes. The studio carries a curated set that clears the contrast bar at both ends, and it scores any gradient by its palest stop rather than an average, so a fade into a light colour shows up as a warning on screen instead of as a surprise at the printer. What still does not work is a gradient that has to end somewhere pale because the brand guide says so. Put that part of the palette in the frame or the surrounding layout instead.

Build the code at /advanced-studio, then check the downloaded file in the QR code tester before you print it.