A QR code is a two dimensional barcode built from black and white modules arranged in a grid, encoding data that a camera can read and decode almost instantly. It works because the pattern includes built in error correction, meaning a scanner can still read the code correctly even when part of it is obscured, faded or printed at an angle, which is exactly what makes it durable enough for packaging, posters and business cards.
The code is generated entirely on your device using an established open source encoding library running in your browser. Nothing you type, including a URL that has not been published yet, is sent to a server to produce the image, which is what makes this a genuinely free qr code online rather than a free tier sitting in front of a paid upload.
Error correction level qr codes rely on to stay scannable
QR codes support four error correction levels, L, M, Q and H, which recover roughly 7, 15, 25 and 30 percent of the code's data respectively if part of it is damaged or obscured. Higher error correction is not simply better in every situation, because it works by adding redundant data to the same physical grid, which makes the pattern denser and therefore harder to scan reliably at very small sizes or from a distance.
Level M is a sensible default for a link on a screen or a clean printed page, since it has a real safety margin without adding unnecessary density. Level H is worth the extra density specifically when the code will carry a logo overlay, get printed small, or be placed somewhere it might get scuffed, like a shipping label or an outdoor sign.
- L, about 7 percent recovery, the lowest density, fine for a clean digital display.
- M, about 15 percent recovery, a reasonable default for most links and print use.
- Q, about 25 percent recovery, worth it when the print environment is less controlled.
- H, about 30 percent recovery, best for small prints, outdoor use or a code with a logo overlay.
Choosing a size and margin that actually scans
A QR code needs a quiet zone, a margin of plain background around the pattern, for a scanner to reliably detect where the code starts and ends against its surroundings. Setting the margin too tight, especially when the code sits on a busy background or close to other printed elements, is one of the most common reasons an otherwise correctly generated code fails to scan on a real phone.
For print, size the code so each individual module is at least roughly 0.3 millimetres, which in practice means a code intended to be scanned from a normal arm's length should print at 2 centimetres across or larger, and a poster meant to be scanned from several metres away needs to be considerably bigger still. When in doubt, print a test copy at actual size and scan it with an ordinary phone camera before finalising a large print run.
Colour choices, and why contrast matters more than style
A QR code scanner works by detecting contrast between the dark and light modules, so the single most important rule for custom colours is keeping strong contrast between the foreground and background, ideally close to the difference between pure black and pure white. A pastel foreground on a light background, or a foreground colour close in brightness to the background even if the hues look different, can fail to scan even though it looks fine to a human eye on a screen.
Inverting the usual pattern, a light foreground on a dark background, is technically readable by many scanners but is less universally reliable than the standard dark on light arrangement, so it is worth testing carefully with more than one phone and app before committing to it for anything printed at scale.
PNG or SVG, and which one to pick
PNG is a fixed resolution raster image, generated here at the exact pixel size you choose, which is the right choice for a digital use case like an email, a slide or a social post where the display size is known in advance. SVG is a vector format that describes the code as shapes rather than pixels, so it can be scaled to any size, from a business card to a building sized banner, with no loss of sharpness and no risk of the blurry edges a raster image gets when stretched beyond its native resolution.
For anything headed to a professional printer, SVG is almost always the better choice, since a print shop can scale it to the exact dimensions needed without asking for a higher resolution source file. For a quick digital share where the size is fixed, PNG is simpler and works everywhere without any special handling. Reach for the svg qr code download specifically whenever the final print size is not yet decided.
How this qr code generator builds the image
The encoding itself is handled by an established, widely used open source QR code library running entirely client side, which implements the QR code standard's data encoding, error correction and module layout rules. Your input is passed to that library along with the error correction level, size, margin and colour settings you chose, and it returns either a PNG data URL or an SVG markup string depending on the format you select.
Because the whole process runs inside your browser tab, generating a code for content you have not published anywhere, such as a link to an unlaunched page or a piece of contact information you have not shared elsewhere, never depends on trusting a remote service with that data first. That local processing is also what separates a genuine qr code maker from a form that quietly uploads your link to build the image somewhere else.
| Level | Recovery | Best for |
|---|---|---|
| L | ~7% | Clean digital display, no damage risk |
| M | ~15% | General purpose default |
| Q | ~25% | Less controlled print environments |
| H | ~30% | Small prints, outdoor use, logo overlay |
How to use the qr code generator
- 1
Enter a URL or text
Type or paste the link or text you want the code to encode. Longer content produces a denser code.
- 2
Choose the error correction level
Pick L, M, Q or H. M is a solid default, and H is worth the extra density for a small or outdoor print.
- 3
Set size, margin and colours
Adjust the pixel size, the quiet margin around the code, and the foreground and background colours.
- 4
Download as PNG or SVG
Choose PNG for a fixed size digital use, or SVG for anything that will be scaled or sent to a printer.
Related tools worth bookmarking
Sources and further reading
- ISO/IEC 18004: QR code bar code symbology specificationThe formal international standard defining QR code structure, error correction levels and encoding modes.iso.org
- MDN: HTMLCanvasElement.toDataURLThe browser API used to export the generated QR code as a PNG image for download.developer.mozilla.org
- W3C: Scalable Vector Graphics specificationThe specification for the SVG format offered as the alternative, infinitely scalable download option.w3.org
Frequently asked questions
Common questions about the qr code generator.
Level M is a sensible default for most cases, recovering roughly 15 percent of the code's data if part of it is obscured. Choose level H, with roughly 30 percent recovery, when the code will be printed small, placed outdoors, or carry a logo overlay in the middle, since all three reduce how much of the clean pattern is actually visible to a scanner.
The most common causes are insufficient contrast between the foreground and background colours, a margin too thin for the scanner to detect where the code starts, or a print size small enough that individual modules blur together. Test any custom colour scheme or small print size with more than one phone before committing to a large print run.
SVG for anything that needs to be resized or sent to a professional printer, since it scales to any size with no loss of sharpness. PNG for a fixed size digital use, such as an email or a slide, where the exact display size is already known and a raster image is simpler to drop straight in.
No. The QR code is generated entirely in your browser using a client side encoding library, so a URL that has not been published yet, or any other content you have not shared elsewhere, never has to be trusted to a remote service to produce the image.
Yes, many scanners tolerate a small logo covering the centre of the code, but it only works reliably at a high error correction level, since the logo is effectively damaging part of the pattern. Use level H, keep the logo small relative to the whole code, and always test the result with a real scanner before printing at scale.
Yes, a QR code can hold up to a few thousand characters depending on the character set and error correction level chosen, but practical readability drops well before that theoretical maximum, since more data means a denser, harder to scan pattern. For a link, keeping the URL as short as reasonably possible keeps the resulting code simpler and more reliable to scan.