QR Codes for Developers: URLs, Wi‑Fi, OTP Enrollment, and SVG Output

QR codes turn a string into something a phone camera can scan. In product work that string is usually a URL, a Wi‑Fi join payload, or an otpauth:// enrollment URI. Getting the payload wrong — bad encoding, truncated query strings, low error correction on a branded sticker — produces scans that fail in the field while looking fine on your laptop.

Bottom line: Put a well-formed, short payload in the QR. Prefer HTTPS URLs or standard URI schemes (WIFI:, otpauth://). Choose error correction for the physical medium (higher if you overlay a logo). Export SVG for UI and print sharpness. Validate the encoded URL with a parser before you print a thousand stickers.

Who this guide is for

Frontend and mobile engineers shipping share links, event check-in, Wi‑Fi onboarding, or TOTP enrollment screens. Marketers placing codes on packaging will hit the same encoding and error-correction choices.

What a QR code actually stores

A QR code stores bytes (typically interpreted as text). Popular payloads:

Type	Example payload	Notes
URL	https://example.com/app?ref=poster	Most common product use
Plain text	GATE-A-42	Inventory, seat labels
Wi‑Fi	WIFI:T:WPA;S:GuestNet;P:s3cret;;	Join network without typing
OTP enrollment	otpauth://totp/App:user@example.com?secret=…	Authenticator setup
Email / SMS / geo	Scheme-specific URIs	Less common in apps

There is no separate "QR URL type" in the code itself — scanners decide how to handle the string. If you need a link, encode a full URL with scheme.

URLs: build them correctly first

Broken query strings are the top QR bug in production launches.

1. Build the URL with the platform URL / URLSearchParams APIs (or a trusted library).
2. Inspect with a URL Parser — confirm path, query, and hash.
3. Percent-encode values that need it via URL Encode/Decode.
4. Only then feed the final string into a QR Code Generator.

const url = new URL("https://example.com/invite");
url.searchParams.set("code", "A1/B2");
url.searchParams.set("src", "qr-poster");
// https://example.com/invite?code=A1%2FB2&src=qr-poster

URL design tips for scanning

Tip	Why
Prefer short hosts and paths	Fewer modules → easier scans
Use HTTPS	Avoid interstitial warnings on modern phones
Avoid fragile fragments for server logic	#… is not sent to the server
Redirect short links if the real URL is long	Dense codes fail on cheap cameras
Do not embed secrets in query strings on public posters	Anyone can photograph the code

Deep links (myapp://… or Universal / App Links) work the same way: the QR only carries the string; OS routing must be configured separately.

Wi‑Fi payloads

Many Android and iOS cameras understand the WIFI: format:

WIFI:T:WPA;S:NetworkName;P:password;;

Field	Meaning
T	WPA, WEP, or nopass
S	SSID
P	Password (omit for open networks)
H	Optional true for hidden SSID

Escape special characters in SSID/password per the Wi‑Fi QR conventions (;, ,, ", \). Generate the string carefully, then encode with the QR Code Generator. Treat printed guest Wi‑Fi codes like credentials — rotate when posters leak beyond the intended audience.

OTP enrollment QR codes

Authenticator apps expect an otpauth:// URI inside the QR:

otpauth://totp/Example:ada@example.com?secret=JBSWY3DPEHPK3PXP&issuer=Example&algorithm=SHA1&digits=6&period=30

The QR is only a transport for that URI. Security properties:

• Anyone who scans or photographs it gets the shared secret.
• Show enrollment QRs only over authenticated sessions.
• Prefer regenerating secrets if a screen was shared in a screenshot or support call.

Validate query parameters (secret, issuer, period) before rendering. Encoding bugs in the URI produce authenticators that never match server codes.

Error correction levels

QR codes include Reed–Solomon error correction so damaged or partially covered codes can still scan.

Level	Approx. recovery	When to use
L	~7%	Clean digital display, maximum data density
M	~15%	Default for many generators; good balance
Q	~25%	Print with some wear; light branding
H	~30%	Logo overlay, harsh print, outdoor stickers

Higher correction increases module count for the same payload — the code looks denser. If scans fail after you add a center logo, bump correction to Q/H or shorten the URL.

SVG vs PNG output

Format	Strengths	Weaknesses
SVG	Crisp at any size; easy to theme in UI; small for simple codes	Some older print shops want raster
PNG	Universal; easy to embed in email	Blurry when scaled up from a small export

For app UI, docs, and vector print, prefer SVG from the QR Code Generator. When a vendor requires PNG, export large (e.g. 1024px+) and scale down — never upscale a tiny raster.

Testing before you ship

1. Generate the QR from the final production URL (not staging) unless the poster is for staging.
2. Parse the payload with URL Parser when the content is a URL.
3. Scan with at least two phone OSes / camera apps.
4. Test from arm's length and at an angle; raise error correction if needed.
5. Confirm dark modules on a light background with sufficient quiet zone (margin).

Quiet zone matters: cropping the white border in Figma is a common self-inflicted outage.

Privacy and client-side generation

Enrollment secrets and Wi‑Fi passwords should not be uploaded to random web services. Prefer generators that run entirely in your browser so SSID passwords and otpauth secrets never leave the machine. codefunc's QR Code Generator follows that model — paste, render, download SVG/PNG locally.

Practical takeaway

Design the string first — correct URL encoding, Wi‑Fi syntax, or otpauth parameters — then generate the code. Use URL Encode/Decode and URL Parser to validate links; use the QR Code Generator for SVG output and an error correction level that matches print and branding. Short payloads scan better; public QRs must never carry long-lived secrets you cannot rotate.

Sources

• ISO/IEC 18004 — QR Code (overview via Wikipedia)
• ZXing Wi‑Fi QR format notes
• RFC 6238 — TOTP (otpauth usage in authenticators)
• MDN: URL
• WHATWG URL Standard