Tutorial

How ScanRouter works

A detailed walkthrough of every option in the QR code generator — so you know exactly what each control does before you print.

What ScanRouter is

ScanRouter is a free, in-browser QR code generator. Paste a URL, style the code, optionally add a center logo or short text, optionally append UTM tracking parameters, then download a print-ready PNG or SVG.

A QR code encodes a piece of text — for ScanRouter that text is always a URL. When someone scans it with a phone camera, the phone opens that URL. ScanRouter generates static QR codes: the URL is baked into the pixels at download time and cannot be changed afterward without reprinting. To still measure scans, ScanRouter can append UTM tags so your analytics tool (Google Analytics, Plausible, Fathom, etc.) attributes the visit to the right flyer, poster, or campaign.

1. Destination URL

This is the only required field. Paste the full URL, including https://. Existing query strings (e.g. ?ref=summer) and hash anchors (e.g. #pricing) are preserved.

  • https vs http: always prefer https://. Most modern browsers warn on plain http.
  • Length matters. Long URLs produce denser QR codes (more squares packed in), which need a larger print size to scan reliably. Consider a URL shortener for anything past ~100 characters.
  • The "Encodes:" line under the URL field shows exactly what the QR code will resolve to — including any UTM parameters you've added. Always check this before downloading.

2. Colors

Two colors control the visual: the foreground (the squares) and the background. For each you get a native color picker plus a hex input — they stay in sync.

  • Foreground must be significantly darker than the background. Phone cameras read QR codes as "dark vs. light" — low contrast = failed scans. Black on white is the gold standard.
  • Avoid inverting (light squares on a dark background). Many older scanner apps refuse inverted codes.
  • Tinted backgrounds (light cream, pale mint) generally work, but always test the scan.
  • Hex format: 6-digit hex like #1a1a1a. Lowercase or uppercase both work.

3. Shape

Three shape controls change how the code looks without changing what it encodes.

Dots

Picks the shape of every module (each little cell).

  • Square — the classic look, highest scan reliability.
  • Rounded — softened corners, still very reliable.
  • Dots — circular dots; trendy but slightly less reliable on low-quality prints.
  • Classy — angular with style; mid-range reliability.
  • Classy rounded — same shape, softer.
  • Extra rounded — most decorative; test carefully on small prints.

Corners

Controls the three large position squares in the corners (the "eyes" the camera locks onto).

  • Square — most reliable.
  • Dot — solid circle eyes; modern look.
  • Extra rounded — softer square eyes.

Error correction

How much of the code can be damaged, covered, or printed badly and still scan. Higher = more redundancy = denser code.

  • L (7%) — only for short URLs on clean, large prints with nothing in the middle.
  • M (15%) — a reasonable default.
  • Q (25%) — recommended for most print jobs.
  • H (30%) — required if you add a center logo or text, or if you're printing on textured material (fabric, wood, recycled paper).

ScanRouter automatically bumps error correction to H the moment you turn on a center overlay, so the overlay never breaks the scan.

4. Size

The size slider (128px – 1024px) controls the export resolution of the PNG, not how physically big the code prints. Bigger PNG = sharper print. For SVG it doesn't matter — SVG scales infinitely.

  • Business card (~1 inch): 300–400px PNG is plenty.
  • Flyer / poster: 600–1024px PNG, or just use SVG.
  • Billboard / large format: always SVG.

5. Center overlay

Optional decoration that sits in the middle of the code. The QR code's built-in error correction reconstructs the pixels that the overlay covers — as long as you stay under ~30% coverage and keep error correction at H.

None

The default. Cleanest, highest scan reliability. Use this when in doubt.

Logo

  • Click Upload image to pick a file from your device. PNG, JPG, and SVG all work. Transparent PNGs look best.
  • The logo is rendered at ~30% of the QR size. Keep your logo simple — fine details disappear at that scale.
  • A solid background behind the logo helps scanners distinguish it from the code.
  • Use Remove to clear it.
  • Error correction is auto-bumped to H. Always do a real scan test.

Text

Renders short text in the middle — useful for category labels ("MENU", "WIFI", "TIP"). Limits: up to 3 lines, ~10 characters per line.

  • Text input — press Enter for a new line. Extra lines and characters are silently trimmed.
  • Font — Sans, Serif, Mono, Rounded, or Display (a heavy poster font). Mono is great for codes and acronyms; Display is best for one bold word.
  • Weight — Regular / Medium / Bold / Black. Bolder is more legible at small sizes.
  • Font size — has an Auto toggle (on by default). Auto picks the largest size that fits given your line count and longest line. Turn Auto off to use the slider (12–72px) for full control.
  • Text color and Text background — same hex + picker pattern as the main colors. The background gives the text a clean rounded panel that hides the QR pixels underneath.
  • "Text may be too large to scan" warning — appears when the rendered text is wider or taller than the safe overlay area. Fix by removing characters, removing lines, or lowering the font size.

6. UTM tracking

UTM tags are extra query parameters appended to your URL that analytics tools read to attribute traffic. They're the standard way to know "this visitor came from the flyer in the coffee shop, not the one in the bus stop".

The Append UTM tags switch turns the whole feature on or off. When off, the QR encodes your bare URL. When on, the QR encodes URL + UTM tags — and the "Encodes:" preview shows you the result.

Fields

  • Source (utm_source) — where the QR lives. Examples: flyer, window-decal, business-card, menu.
  • Medium (utm_medium) — the channel. For QR codes this is almost always qr.
  • Campaign (utm_campaign) — which promotion. Examples: spring_sale_2026, grand_opening, holiday_menu.
  • Term (utm_term) — optional, often used for an A/B variant or a keyword. Example: variant_a.
  • Content (utm_content) — optional, used to distinguish multiple placements within the same campaign. Example: top-banner vs footer.

Naming conventions

  • Lowercase only — analytics treats QR and qr as different sources.
  • Use - or _ instead of spaces.
  • Be consistent across campaigns so reports group cleanly.

7. Preview & download

The right-hand (or top, on mobile) preview re-renders live as you change any setting. Once you're happy:

  • PNG — best for digital use, slides, social posts, and small prints. Resolution is whatever you set with the Size slider.
  • SVG — best for print. Vector format, scales to any size without losing sharpness. Use SVG for flyers, posters, packaging, and signage.

Print tips

  • Print the code at least 1 inch (2.5 cm) square.
  • Leave a quiet zone — at least 4 modules of empty white around the code. Don't crop tight.
  • Use SVG whenever possible.
  • Don't put the code over a busy background image. Solid white or solid light color works best.

8. Testing before you print

A scan test takes 60 seconds and saves thousands of wasted flyers. Before sending anything to a printer:

  1. Download the QR (PNG or SVG) and view it at the size it will be printed.
  2. Scan it with at least two different phones — one newer, one older. Both the native camera app and a third-party scanner if possible.
  3. Scan from the realistic distance someone will use (arm's length for a flyer, 2–3m for a window decal).
  4. Scan under the actual lighting where it will live (warm indoor light, sunlight, glass reflections).
  5. Open the resolved URL and confirm UTM tags appear in your analytics tool's real-time view.

9. FAQ

Is ScanRouter free?

Yes. No account, no watermark, no scan limits.

Does ScanRouter store my data?

No. The QR code is generated entirely in your browser. The URL you type never leaves your device.

Can I edit the URL after I print?

No — these are static QR codes. The URL is baked into the pixels at download time. If you need to change the destination later, point the QR at a redirect you control (a short URL or a landing page on your own domain) so you can update the redirect target without reprinting.

Do UTM tags work with all analytics tools?

Yes. UTM is a standard Google introduced years ago. Google Analytics, Plausible, Fathom, Matomo, Mixpanel, Amplitude, PostHog, and most others all read UTM parameters automatically.

Why does my code suddenly look denser?

Either your URL got longer (UTM tags add length) or error correction went up to H because you turned on a center overlay. Both are normal — just make sure the print size is large enough.