Generators

QR Code Generator

Generate QR codes with custom styles and export formats.

undefined
undefined:
undefined
undefined
  • undefined
  • undefined
  • undefined
  • undefined

What is a QR Code?

A QR Code (Quick Response Code) is a two-dimensional barcode that can store large amounts of data. Compared to traditional barcodes, QR codes can store more data, support various character encodings, and are widely used for mobile payments, product tracking, and information sharing.

Error Correction Levels

  • L (Low): ~7% recovery capacity, suitable for simple scenarios
  • M (Medium): ~15% recovery capacity, recommended for general use
  • Q (Quartile): ~25% recovery capacity, suitable for complex environments
  • H (High): ~30% recovery capacity, maximum error tolerance

Use Cases

  • URL Sharing: Quickly share website links
  • Contact Info: Generate QR codes with phone, email
  • WiFi Passwords: Generate WiFi connection QR codes
  • Text Content: Store any text information
  • Product IDs: Product info, serial numbers, etc.

Format Options

  • PNG: Raster format, ideal for web use, smaller file size
  • SVG: Vector format, scales without loss, ideal for printing
  • Data URL: Base64 encoded image data, can be embedded directly in HTML

A QR code generator converts text, a URL, Wi-Fi credentials or geographic coordinates into an ISO/IEC 18004 symbol and exports it as PNG, SVG or a Base64 data URL. Use it to bridge printed material to a link, share a guest network, or embed a small graphic without hosting a file.

What width and margin actually measure

The width field sets the total pixel size of the exported image, while margin is counted in modules, not pixels. Both feed a single scale factor, width divided by (module count + 2 × margin), that is then applied to every module. The default input is 30 UTF-8 bytes, which at error correction M needs version 3: a 29 × 29 grid. With margin 4 that grid occupies 37 units, so a 256 px export draws each module 6.92 px wide. Because the divisor is not a whole number, module edges land between pixels and small PNGs look slightly ragged or unequal; choosing a width that is an exact multiple of 37 gives every module the same size. The SVG export avoids the problem entirely: it writes viewBox="0 0 37 37", sets shape-rendering="crispEdges" and records width only as a display hint.

Four segment modes, four costs per character

Data is stored in segments, and the mode of a segment fixes what one character costs: numeric packs three digits into 10 bits, alphanumeric packs two characters into 11 bits, byte mode spends exactly 8 bits per byte, and kanji mode stores Shift-JIS characters in 13 bits. The encoder picks a mode per run, so equal character counts can land on different versions. Thirty digits fit version 1 at level M, a 21 × 21 grid; thirty ASCII letters need version 3, 29 × 29. Non-ASCII text pays the UTF-8 tax on top: 25 Chinese characters are 75 bytes in byte mode and push level M to version 5, a 37 × 37 grid. Trimming a URL or dropping analytics parameters shrinks the grid more reliably than lowering the error correction level.

Two reasons a generated code fails to scan

The first is colour. Modules must print darker than the background, and both hex fields are converted straight into pixel channels: 3, 4, 6 and 8 digit hex are accepted, anything else raises a generation error. A CSS colour name such as red is not an error — it parses into zeroed channels with zero alpha, so the output looks blank instead of failing loudly. Inverting the pair, light modules on a dark field, is tolerated by some phone apps and rejected by many handheld scanners. The second reason is payload syntax. Prefixes like mailto:, geo: and WIFI: are conventions implemented by scanning apps, not by the QR standard, and each carries its own escaping rules; inside a WIFI: payload a semicolon must be written as a backslash plus a semicolon, or the field ends early and the password is cut off at that point.

Worked example

Reading the module math for the default input

Input 
https://devtoolbox.example.com
Output 
error correction M → version 3, 29 × 29 modules; margin 4 → 37 × 37 units; 256 px ÷ 37 = 6.92 px per module

The string is exactly 30 bytes, and byte mode at level M holds at most 26 bytes in version 2, so the encoder jumps to version 3. Margin adds four modules on each side, which is why the exported image spans 37 modules rather than 29. The SVG file carries the same 37-unit geometry as a viewBox, so it stays sharp at any print size.

Limits and pitfalls

  • Payload ceiling is 2,953 bytes at level L and 1,273 bytes at level H (version 40, byte mode); past that the encoder throws and the page only reports a generic generation failure.
  • margin accepts 0–10 and is measured in modules, not pixels; setting it to 0 removes the quiet zone the standard expects, and many scanners then refuse the symbol.
  • width is the total image size in pixels including margins, not the module size; when it is smaller than module count + 2 × margin the encoder ignores it and falls back to 4 px per module.
  • The version and capacity shown under the preview come from a character-count lookup with fixed 25 / 47 / 77 / 114 thresholds; they ignore segment mode and correction level, so 10 Chinese characters are labelled tiny while the real symbol is 29 × 29.
  • The input is measured in UTF-16 code units, so one emoji counts as 2 characters but costs 4 bytes in byte mode, making the capacity readout optimistic.

Related tools

When it goes wrong

"I edited the text, but the image below is still the old code."

CauseText, correction level, margin and width all share one 500 ms timer, and each run holds isGenerating for the length of two encodes — PNG first, then SVG. A timer tick that lands inside that window returns early and is never re-queued, so the edit disappears.

FixPress 重新生成: it cancels the pending timer and encodes immediately, and the success toast confirms the run that produced the visible image. Do not judge freshness by the preview alone.

"Typing a hex colour by hand makes the preview flicker and settle on a colour that is not mine."

CauseThe text field writes darkColor on every @input event, so each keystroke restarts the 500 ms timer. A value caught mid-word can be five characters long, a length the colour parser rejects, and the failed run leaves the previous image untouched.

FixPaste the whole value at once, or use the colour swatch beside the field, which only ever emits seven-character hex. Then read 前景色 in the info panel to see which value the last successful run used.

"My phone shows the Chinese text perfectly, but the warehouse scanner prints garbage."

CauseThe payload goes through TextEncoder into byte segments with no ECI designator, so it is bare UTF-8 with nothing declaring the character set. A reader that falls back to the default ISO-8859-1 reading turns every three-byte character into three Latin-1 glyphs, while phone apps simply guess UTF-8.

FixCheck the version jump first — each Chinese character costs 3 bytes here — then, if the scanner is fixed hardware, encode a short ASCII URL that resolves to the text instead of the text itself.

"I pasted the Data URL into our wiki and the image is broken; the page also got heavy."

CauseCopy Data URL hands over the whole PNG as base64: roughly 4/3 of the binary size plus a 22-character prefix, on one unbroken line. Wikis, mail clients and CMS sanitisers cap or wrap long attribute values, and a wrapped base64 string stops being a valid image.

FixCopy the SVG and inline it, or download the PNG and reference it by file path. Both keep the document small and stay editable; the Data URL is only worth it for a throwaway snippet.

"I deleted the text, but the old QR code is still sitting there and I can still download it."

CauseThe watcher regenerates only while the trimmed input is non-empty, and only 清空 resets qrCodeDataUrl and qrCodeSvg. The preview block is gated on v-if="qrCodeDataUrl", so the leftover string keeps the stale symbol alive along with its download and copy buttons.

FixUse 清空 rather than selecting the text and deleting it. Before a file leaves your machine, confirm that 内容长度 reads 0 characters, or that a regenerate toast came back for the payload you mean to ship.

When this page is enough, and when a command line wins

The decisionOn this pageReach for instead
One code that goes on a printed flyer or a posterDownload the SVG. For the 30-byte default at margin 4 it writes viewBox="0 0 37 37", so the print shop can scale it to any placed size without resampling, and the module edges land on whole units.qrencode -t EPS -m 4 -s 6 "https://example.com" hands the same vector to a layout program as EPS, and the step can live inside a build script where no browser is involved.
Fifty links, one code eachThere is a single textarea and one download per click, with the file named qrcode-<timestamp>.png. Nothing on the page accepts a list, so fifty codes means fifty paste-download rounds.qrencode -r links.txt -o out.png reads one line per code and writes out-01.png, out-02.png and so on: byte-for-byte the same encoding, with the loop done for you.
The code has to live inside HTML or MarkdownCopy Data URL returns data:image/png;base64,…, a single line about 4/3 the size of the PNG plus the 22-character data:image/png;base64, prefix. It works, but the line is long and cannot be edited after pasting.Copy the SVG and inline the markup instead: the 37-unit viewBox survives any container width, and the two paths can be recoloured from CSS when the site switches to dark mode.
A logo belongs in the middle of the codeOnly the foreground and background channels are exposed and every module is a square; there is no layer to place an image on, so a centred logo has to be composited after export.Composite in Pillow or with qr-code-styling and keep error correction at H, which is the level that buys the redundancy — the standard lets a reader recover roughly 30% of codewords, and that is the budget the covered modules spend.
Proving the exported file actually decodesThe only check available is a phone pointed at the preview. Nothing here reads the file back, so a symbol that fails on one scanner family looks fine throughout.zbarimg -q out.png prints the decoded string, so a CI step can diff it against the input and fail the pipeline when the bytes disagree — the one test the page cannot run for you.
A guest needs the Wi-Fi password this minuteThe WiFi template pre-fills WIFI:T:WPA;S:NetworkName;P:Password;; and you edit the three fields by hand. Correct for one code, tiresome on a phone in the hallway.The router admin page and both mobile operating systems emit the same payload natively, and the resulting symbol is identical, so whichever device is already open in your hand wins.

Frequently Asked Questions

How much data can one QR code hold?
Up to 4,296 alphanumeric characters or 7,089 digits at the lowest error correction level. Capacity drops sharply at higher levels and with binary content. Keep URLs short and the module density low for reliable scanning.
Which error correction level should I pick?
L holds the most data; H survives the most damage (about 30%) and is required when you place a logo in the center. L or M is fine on screens; use Q or H for printed stickers that may wear out.
Do QR codes expire?
No. A QR code is a visual encoding of your data and works forever as long as the encoded content itself stays valid. A "dead" QR code almost always means the URL behind it was taken offline.

Content reviewed: