Barcode Generator: Create CODE128, EAN-13, and UPC-A Barcodes in Your Browser

By Brian Ferris · Seattle, WA

A barcode is one of those things that looks trivial until you need one, and then every detail suddenly matters: the format has to match the scanner that will read it, the check digit has to be right, and the printed bars have to be wide enough for the printer to resolve. This barcode generator handles the first two for you and gives you direct control over the third. It runs entirely in your browser, supports ten symbologies, and redraws the symbol as you type, so you can go from a product number to a printable image without installing anything or creating an account.

What makes the tool worth keeping open is the range of settings that actually affect whether a code scans in the real world. Bar width sets the module width, the margin controls the quiet zone around the symbol, and the height slider keeps the bars from being squeezed into a space that a scanner cannot read. Those three values are the difference between a barcode that works on a phone screen and one that works on a shipping carton, and they are all adjustable from the same panel while the preview updates live.

What the Barcode Generator Does

The tool covers ten formats — CODE128, CODE39, CODE93, EAN-13, EAN-8, UPC-A, ITF-14, MSI, Pharmacode, and Codabar — selected from a single dropdown. You type or paste the value to encode, and the symbol appears immediately. The engine draws black bars on a white background regardless of the page theme, which is the only correct choice for a barcode: a scanner needs maximum contrast, and an inverted or low-contrast symbol is a common cause of read failures.

Under the dropdown you get four numeric controls, and each one maps to a real measurement rather than a cosmetic tweak. Bar width ranges from 1 to 5 pixels and sets the width of the narrowest bar, which is the X-dimension of the symbol. Height runs from 50 to 200 pixels and controls the bar length. Font size adjusts the human-readable caption printed underneath. Margin sets the blank space on each side — the quiet zone. Four sample-data buttons fill in a valid example for CODE128, EAN-13, UPC-A, or CODE39 if you want to check a layout before entering real data.

When the symbol looks right, you have two ways to take it with you. Copy sends the image to the clipboard so you can paste it straight into a label template or a document, and Download saves it as a PNG using the filename you type into the last field. Nothing is uploaded at any point: the encoding happens with a client-side library and the image is drawn onto a canvas in your own browser, which matters if the codes carry serial numbers, asset IDs, or patient identifiers.

Which Barcode Format Should You Use?

The format is not a style choice — it is dictated by whatever will read the code. A retail point-of-sale scanner will only accept the fixed-length retail symbologies, while an internal warehouse label can use almost anything as long as both ends of the system agree. Here is how the ten supported formats line up.

For most internal work, CODE128 is the right default. It is the most widely supported format that still encodes the full ASCII set, it handles variable-length values, and it packs a lot of data into a narrow label because it uses three code sets and switches between them as needed. CODE39 is the older alternative, still common in systems that were specified decades ago, but it produces a wider symbol for the same amount of data. CODE93 exists to fix exactly that problem, and it is a sensible choice when a legacy reader expects the CODE39 family but the label is tight.

The numeric formats are where people get into trouble, because they are not interchangeable. EAN-13 and UPC-A are the retail codes; UPC-A is effectively EAN-13 with an implicit leading zero, which is why a North American product number appears as a zero in the first position of an EAN-13. EAN-8 is the compressed version for small packs, and ITF-14 is what goes on the outer carton that contains the individual items. If you print an EAN-13 where a warehouse system expects ITF-14, the digits will be right and the code will still be unreadable by that system, because the scanner is configured for a different symbology.

How the Encoding Actually Works

Every linear barcode is a sequence of modules — the narrowest element, which is either a bar or a space. A narrow bar is one module wide, a wide bar is two or three or four modules, and the pattern of those widths is what carries the data. Because every element is a whole multiple of the module, the entire symbol scales from one number: the X-dimension. Change it and the whole code grows or shrinks proportionally, which is exactly what the bar width slider does.

CODE128 is built from 106 defined symbols, split across three code sets. Set A covers control characters and uppercase text, set B covers printable ASCII, and set C packs pairs of digits into a single symbol, which is why a long numeric string comes out noticeably shorter in code set C. The symbol starts with a start character, switches code sets when the data demands it, and ends with a modulo 103 check character followed by a fixed stop pattern. The check character catches substitution errors before the scanner reports a value.

The retail formats work differently. EAN-13 and UPC-A use a fixed structure with three-module guards at each end and a five-module guard in the middle, and the digits are encoded with three different bar patterns whose combination also communicates the first digit of the number. That is why an EAN-13 has no need to print the leading digit in the bars: the parity pattern of the left-hand digits already tells the scanner what it is.

Worked example: the EAN-13 check digit

All of the fixed-length numeric formats use the same modulo 10 check digit. Working from the right, the data digits take alternating weights of 3 and 1, the products are summed, and the check digit is whatever brings that total up to the next multiple of ten. Take the valid EAN-13 590123412345 — the twelve data digits and the weights from the right.

The sum is 83, the next multiple of ten is 90, and the difference is 7 — so the complete code is 5901234123457. A second example with the digits 400638133393 sums to 89, which gives a check digit of 1 and a full value of 4006381333931. The same arithmetic covers UPC-A, EAN-8, and GTIN-14, and the reason every one of them ends with a check digit is that the scheme catches every single-digit error and roughly nine out of ten transpositions of adjacent digits.

You do not have to run this arithmetic by hand. The encoding engine in the generator calculates the check digit for you when you enter the data digits, and it validates the value when you enter all thirteen — so if you paste an EAN-13 whose last digit is wrong, the symbol will not render. That behaviour is a feature rather than a bug: it is far cheaper to notice a bad number on screen than after a thousand labels have been printed and the pallet is rejected at receiving.

Getting the Size Right: X-Dimension, Magnification, and Quiet Zone

Once the data is correct, the physical size decides everything else. GS1 defines a nominal EAN-13 at 37.29 by 25.93 millimetres with an X-dimension of 0.330 millimetres, and it allows magnification from 80% to 200% of that nominal size, which works out to an X-dimension between 0.264 and 0.660 millimetres. Below 80% the symbol is out of specification for point of sale, and a retailer is entitled to reject the packaging.

Different use cases call for different minimums, and it pays to know which one applies to you.

The quiet zone is the other half of the size question. A scanner uses the blank space at each end of the symbol to work out where the first and last bar are, so a barcode printed flush against a label edge, a logo, or a border may not read at all. For CODE128, CODE39, and GS1-128 the rule is ten times the module width on each side, with a minimum of 6.35 millimetres. For UPC and EAN the standard is about nine times the module width, which at nominal size works out to roughly three millimetres of blank space on each side.

Those numbers translate directly into the tool's controls. The bar width slider is the X-dimension in pixels, and the margin slider is the quiet zone in pixels — applied on both sides. The default of 2 px for bar width with a 10 px margin gives a quiet zone of five modules, which is below the nine-module retail minimum, so for an EAN-13 or UPC-A symbol raise the margin to at least 18 px, and to 20 px or more for CODE128 and CODE39. It is a two-second change that removes one of the most common causes of an intermittent read.

Bar height deserves the same attention. The nominal EAN-13 bar height is 22.85 millimetres, and the height slider's range of 50 to 200 pixels is wide enough to cover anything from a small asset tag to a large carton mark. What you should not do is truncate the bars to make the symbol fit a design: a shortened symbol loses the redundancy that lets a scanner decode a partially obscured code, and truncated height is a classic failure on curved or damaged surfaces.

Printing Without Scan Failures

Printers cause more barcode failures than encoders do. The problem is arithmetic: a printer can only lay down whole dots, so the module width you specify has to be a whole-number multiple of the printer's dot size. Ask a 203 dpi printer for a 0.33 mm bar and it will round, some bars come out a dot wider than others, the ratios drift, and scan rates fall — all invisible to the eye.

Two dots is a floor rather than a target; aim for three or more, and pick an X-dimension that is a whole number of dots so the printer never has to round. For retail-ready labels carrying UPC or EAN symbols, 300 dpi is the practical minimum, while 203 dpi will do for CODE128 and CODE39 at larger sizes. Small-format codes are best left to 600 dpi.

The rest of the checklist is about not undoing clean output. Print at 100% scale and never use a fit-to-page option, because scaling resamples the bar edges and produces the fuzzy transitions that camera scanners tolerate and laser scanners do not. Keep the bars solid black on white matte stock — coloured label material quietly reduces contrast, and a pale background counts against the quiet zone just as surely as ink does. If you must resize a raster image, use nearest-neighbour sampling and keep the module width aligned to the pixel grid, or simply regenerate the barcode at the new bar width, which is faster and exact. Before committing a print run, scan one label with two different readers; if a camera scanner reads it and a laser scanner does not, the bars are too thin or anti-aliased.

Copying, Downloading, and Naming the Output

The generator's output path is deliberately short. Copy places the rendered image on the clipboard so it can be pasted into a label template, a spreadsheet cell, or a document without touching the filesystem. Download writes a PNG named from the filename field, which is worth using properly: a value such as the SKU or the GTIN plus a size suffix turns a folder of identical barcode.png files into a set you can actually match to products later.

Settings persist while you change the data, which makes a mixed run practical. Paste one value, download it, paste the next, and the bar width, height, and margin stay exactly where you set them — so a batch of labels comes out dimensionally consistent even when the numbers differ in length. The live preview redraws as you edit, so a value that is the wrong length for the selected format is obvious on screen rather than at the printer. For long product lists, working in the same order as your spreadsheet and naming files as you go keeps the whole batch traceable without any extra tooling.

Common Reasons a Barcode Will Not Scan

When a code fails at the scanner, the cause is usually one of a handful of predictable problems, and they are worth checking in this order.

Home printers are the weakest link in the chain. A 1200 dpi laser running at 600 dpi, or an inkjet reproducing sub-millimetre bars on coated paper, will blur the transitions between elements even when the file itself is perfect. Thermal label printers avoid ink spread and hold edges sharply, which is why warehouses use them; for a short run of internal labels, the practical compromise is to keep the bar width generous and print on plain matte stock.

Wrapping Up

A barcode generator is only useful if the codes it produces actually scan, and that comes down to three decisions: the right symbology for the scanner that will read it, a correct check digit, and a module width that the printer can render without rounding. This tool covers the first two automatically and puts the third in your hands, with a live preview so you can see the effect of every change before you commit it to a label.

Start with CODE128 for internal work and EAN-13 or UPC-A for anything that has to pass a retail scanner, set the bar width to at least 2 px and the margin to nine or ten times that value, and test one printed label with two readers before running the batch. That sequence handles the overwhelming majority of real-world barcode problems, and it takes less time than reading this paragraph again.

Brian Ferris

Seattle, WA · SO reputation 7997 · Badges: 5🥇28🥈27🥉 · SO member since 2009