User Guide
How to use it
A walkthrough of the generator, plus in-depth notes on the Appearance and UTM Parameters sections.
Overview
The Core12 QR generator takes a URL and encodes it into a scannable QR code. You can style the code, tag the URL with UTM parameters for campaign tracking, overlay a logo, and download the result as PNG or SVG (or copy the PNG to your clipboard).
Typical flow:
- Paste a URL into the URL field.
- Expand Appearance to adjust export size, error correction, or colors.
- (Optional) Expand UTM Parameters and fill the tracking fields — the URL encoded into the QR updates live.
- (Optional) Expand Logo and upload a square image to place in the center.
- Click Download PNG, Download SVG, or Copy PNG.
Everything runs in your browser. Nothing is uploaded to a server — presets and history are stored in localStorage on this device only.
Appearance
Export size
Controls the pixel dimensions of the downloaded PNG (the SVG is vector and scales freely, but the exported width/height attributes will match). Options are 256, 512, 1024, and 2048 pixels.
- 256 px — inline on a web page or chat.
- 512 px — social post, email signature, small print.
- 1024 px — most print flyers, signage, slide decks. A solid default.
- 2048 px — large-format print, posters, banners.
The on-screen preview stays a fixed 256 px; export size only affects the downloaded file.
Error correction
QR codes store redundant data so they can still scan when part of the code is damaged, dirty, or obscured. Higher levels protect more of the code but make the pattern denser.
- L (~7%) — recommended only for clean, digital contexts.
- M (~15%) — default. Good for screens and clean print.
- Q (~25%) — noisier environments or when the code might get partially covered.
- H (~30%) — required when a logo overlay covers the center.
Adding a logo automatically forces H and disables the selector, because a logo overlay with a lower error-correction level will likely fail to scan.
Foreground and background
The foreground is the color of the QR modules (the dark squares); the background fills the rest of the frame. The single thing that matters for scan reliability is contrast.
- Keep the foreground significantly darker than the background. Near-black on white is the safest pairing.
- Brand accents work best as the foreground on a white or very-light background.
- Inverted codes (light foreground, dark background) scan less reliably on older cameras. Avoid unless you've tested.
UTM Parameters
UTM parameters are query-string values appended to the URL that analytics tools (Google Analytics, Plausible, most others) read to attribute traffic to a specific source and campaign. Filling any UTM field below the URL will automatically append it to the URL encoded in the QR.
Only fields you fill are appended. If you leave them all blank, the QR encodes the URL exactly as typed.
The five fields
- utm_source
- Where the traffic comes from. The referring property or publication. Examples:
newsletter,linkedin,partner-site. - utm_medium
- The marketing channel or method. Examples:
email,social,cpc,print. - utm_campaign
- The specific campaign this link belongs to. Keep it consistent across all touchpoints for that campaign. Examples:
spring_launch,q2_webinar. - utm_term
- Optional. Originally for paid search keywords; also useful for audience segments.
- utm_content
- Optional. Differentiates variants inside the same campaign — which asset, which position, which copy. Examples:
header-link,footer-link,qr-poster-a.
How the final URL is built
The generator parses the URL you typed and adds each filled UTM field as a query parameter (using the browser's native URL.searchParams.set). Existing query parameters on the input URL are preserved, and any UTMs you set here will overwrite ones of the same name.
Example. Given this URL:
https://example.com/pricing?ref=footerWith utm_source=qr and utm_campaign=spring_launch, the encoded URL becomes:
https://example.com/pricing?ref=footer&utm_source=qr&utm_campaign=spring_launchPresets
Use presets to save a set of UTM values under a name and reload them later. Handy when one campaign needs multiple QR codes for different destinations — fill the UTMs once, save as “Q2 webinar”, and load that preset for each new URL. Presets live in localStorageon this device; they don't sync across browsers.
Logo, presets, and history
Short notes on the remaining sections.
- Logo — upload a square image (max 2 MB). The generator overlays it in the center and forces error correction to H so the code stays scannable. Use a solid or high-contrast background on the logo itself; transparent PNGs that leave gaps over dark modules can confuse scanners.
- History — each successful download (PNG or SVG) records the URL, UTMs, colors, size, and EC level. Click Restore on any entry to reload those values. History is capped at 25 entries, stored in
localStorage, and can be cleared. - Copy PNG — writes the image directly to your clipboard using the Clipboard API. Paste into Slack, email, a document, or a design tool. Falls back silently if the browser blocks clipboard access.