Three steps to a finished code

Choose QR code or barcode.
Enter the content. A QR code takes anything, and the barcode takes any ASCII text.
Adjust the colours and size, then export as PNG, JPG or SVG.

To see it working first, press Sample. It fills in a working value for whichever type is selected.

Choosing between a QR code and a barcode

Use a QR code for a URL, Wi-Fi details, contact information or a block of text.
Use a barcode for products, cartons and shelf labels, because that is what existing scanners read.
A QR code holds thousands of characters; a one-dimensional barcode usually holds a few dozen.
A QR code still scans with a corner covered, while a scratched barcode fails outright.

What you can put in a barcode

The barcode here is CODE128, the least fussy of the one-dimensional formats.

Letters, digits and most punctuation are fine, for example JR-TOOLKITS-001.
There is no length limit, which suits internal references, batch numbers, asset tags and cartons.
All-digit values are packed to half the length, so more digits fit in the same space.
Non-English characters cannot be encoded. Use a QR code when you need them.
The check digit is calculated and encoded for you, so there is nothing to append.

Retail barcodes such as EAN-13 and UPC are out of scope. They take a fixed count of digits, and the number has to be issued by GS1 rather than made up.

Setting the error correction level and quiet zone

Both settings apply to QR codes, and together they decide whether a code still scans once it is dirty or partly covered.

Choose Q or H for anything printed, where the code may pick up dirt or a crease.
L or M is plenty for a screen, a web page or a slide, and keeps the code cleaner to look at.
Higher levels pack in more squares, so the code gets denser and harder to scan from a distance.
Put a logo on top only at level H, and keep the covered area under a seventh of the code.
The quiet zone is the blank margin scanners use to find where the code begins. Four modules is safe.
Set it to zero only when your layout software adds the margin itself.

What to watch when you change the colours

Any colour is allowed, but scanners read brightness rather than hue, so some combinations never scan.

The foreground has to be darker than the background. Light on dark fails on most scanners.
The two colours need roughly a threefold difference in brightness. Two shades of one colour look elegant and scan badly.
On a transparent background the real backdrop is whatever you place the code over, and a dark slide swallows a black code.

The preview tells you which rule you have crossed but never blocks the export, since some codes are only there for decoration. Scan one with your phone before sending anything to print.

What to check when a code will not scan

Scan the preview on screen first, to see whether the code itself or the printing is at fault.
Set the foreground back to black and the background to white. If that scans, the colours were the problem.
Keep the quiet zone at four modules or more, and keep other artwork away from the edges.
Print QR codes at 2 cm square or larger, and keep barcodes at least 1 cm tall.
Raise the export width or use SVG. Soft edges make scanners misread the code.

Choosing between PNG, JPG and SVG

SVG is a vector file that stays sharp at any size, so use it for print or for handing to a designer.
PNG supports transparency and suits slides and web pages.
JPG has no transparency, so a transparent export lands on a white background instead.
Export width applies to PNG and JPG only. 512 to 1024 pixels is plenty on screen; use 2048 or more for print.

Does anything you type leave the browser

No. Encoding and drawing both happen in your browser, no request carries your content anywhere, and the exported file is assembled on your own machine. Internal URLs and unreleased product numbers are safe to paste. See the privacy policy for the details.

QR code and barcode generator — colours and vector export