Startseite / Blog / QR-Code online erstellen (PNG, SVG, WLAN, vCard) — Guide

QR-Code online erstellen (PNG, SVG, WLAN, vCard) — Guide

· 8 Min. Lesezeit
#QR-Code #Design #Druck #WLAN #vCard #PNG #SVG

QR-Code online erstellen (PNG, SVG, WLAN, vCard) — Guide

QR-Codes sind überall — und zuverlässiges Scannen ist wichtiger als reine Optik.

Praxisleitfaden für QR-Codes, die zuverlässig scannen: Größe, Kontrast, Quiet Zone, Fehlerkorrektur, Logo und Export für Web und Druck.

Step-by-step workflow (reliable scans)

  1. Choose the type (URL, text, Wi‑Fi, vCard).
  2. Enter the content.
  3. Keep strong contrast (dark on light).
  4. Set a clean margin (quiet zone).
  5. Increase error correction if you add a logo.
  6. Export PNG for quick use, SVG for print.
  7. Test on at least two phones.

What you can encode

  • URL / website
  • Plain text
  • Wi‑Fi credentials (SSID + password + encryption)
  • vCard contact data

If you want marketing measurement, use UTM parameters in the destination URL: utm_source, utm_medium, utm_campaign.

PNG vs SVG

PNG is raster and works great for web and messaging. SVG is vector and is the safest choice for professional design and printing.

For printing, SVG is usually the right choice because it scales without quality loss.

Size, distance, and density

QR codes fail most often when they are too small for the scan distance, or when the code is too dense (too much data, too high error correction, or heavy styling).

Practical method:

  1. Put the QR in the real layout (poster, label, business card).
  2. Scan from the realistic distance.
  3. If scanning is inconsistent, increase size and margin and simplify styling.

If you need a simple mental model: the “harder” the environment (farther distance, glossy paper, low light, textured surfaces, busy backgrounds), the more conservative you should be with size and contrast.

Quiet zone (margin)

The quiet zone is the empty border around the QR code. Cropping too close is a top cause of scan failure — especially in print where trimming can remove margins.

Practical tips:

  • Keep a clear, even margin on all sides.
  • Avoid placing the QR directly on a photo. Use a light panel behind it.
  • If the QR is going into a layout tool, make sure the export doesn’t accidentally clip the outer pixels.

Error correction

Error correction adds redundancy:

  • Medium works for most cases.
  • High is helpful for logos and rough print conditions.

Higher error correction can make the QR denser, so increase size if needed.

If you add a logo, you should almost always increase error correction. Then, check the resulting density: if modules become very small and crowded, increase size rather than trying to “stylize” your way out of it.

Color, contrast, and style

Keep contrast high:

  • Dark foreground on a light background is safest.
  • Avoid low-contrast combinations.
  • Gradients and inverted colors can work, but require testing.

If reliability is critical (payments, tickets, check‑in, safety instructions), choose a simple style with solid colors and a generous margin. Save aggressive styling for marketing assets where you can afford some scan friction.

To keep a logo QR scannable:

  • Keep the logo small and centered.
  • Increase error correction.
  • Test on multiple phones and in different lighting.

Also consider leaving a white “buffer” behind the logo so it doesn’t blend into modules. If the logo has low contrast, the QR will need more size to stay readable.

Wi‑Fi QR codes: best practices

Wi‑Fi QR codes are perfect for guest access in cafés, offices, rentals, and event venues. They typically encode the SSID, encryption type, and password.

Recommendations:

  • Prefer a dedicated guest network if possible.
  • Rotate the password if the QR is publicly accessible.
  • Place the code where it won’t be affected by glare (near windows, glossy lamination, etc.).
  • Add a short label: “Scan to join Wi‑Fi” so users understand the action.

vCard QR codes: what to include

vCard QR codes are great for business cards, booths, resumes, and event badges. After scanning, users can add a contact directly.

Keep it lean:

  • Name
  • Phone
  • Email
  • Company (optional)
  • Website (optional)

The more fields you add, the more data you encode, and the denser the QR becomes. Dense codes can still work, but they require larger size and stronger printing conditions.

Tracking scans with UTM parameters

While the QR pattern itself is static, you can track performance by adding UTM parameters to the destination URL.

Typical keys:

  • utm_source — where the QR is placed (poster, packaging, menu)
  • utm_medium — the channel (print, offline, insert)
  • utm_campaign — your campaign name

To keep the QR easy to scan, keep your URL as short as possible. If you need a long URL with many parameters, consider using a clean short link that redirects to the fully tagged URL.

Accessibility and UX tips

QR codes should not be the only way to reach content. Good UX practices:

  • Print the short URL under the QR as an alternative.
  • Add a clear label (“Scan to open the menu”, “Scan to download the app”).
  • Use sufficient physical size so users don’t struggle to aim their camera.

These small details reduce frustration and improve conversion.

Common mistakes (and how to avoid them)

  1. Too little margin (quiet zone). Fix: increase margin; don’t crop the code tightly.
  2. Low contrast. Fix: use a darker foreground or a lighter background; avoid pastel-on-light.
  3. Too small for the distance. Fix: increase physical size, especially for posters and signage.
  4. Busy background. Fix: place the QR on a solid light panel.
  5. Over-stylized modules. Fix: simplify style and compensate with size.
  6. Not testing before printing. Fix: print a proof and test on multiple phones.

QR codes on screens vs print

Screen QR codes (websites, apps, TV) have different failure modes than print:

  • On screens, motion blur and reflections can be a bigger problem than resolution.
  • On print, trimming, paper texture, and ink spread can destroy thin details.

For screens:

  • Avoid tiny QRs in a corner.
  • Use a solid background with padding.
  • Keep it on screen long enough for people to open the camera and focus.

For print:

  • Prefer SVG.
  • Avoid placing the QR over photos.
  • Use larger size than you think you need.

Real-world use cases (quick recommendations)

  • Restaurant menu: URL QR, medium error correction, strong contrast, medium/large size.
  • Event check-in: URL QR, simple style, high contrast, larger size, test on multiple phones.
  • Business card: vCard or URL QR, consider SVG, avoid extreme styling, keep margin generous.
  • Wi‑Fi sign: Wi‑Fi QR, clear label, consider rotating the password if displayed publicly.
  • Product packaging: URL QR with UTM, SVG export, high contrast, test on actual material.

Advanced tips for higher scan success

Keep URLs short (reduce density)

Long URLs create denser QR codes. Dense codes can still scan, but they need more size and better conditions. If your marketing URL is long:

  1. Use a clean short link that redirects to the full URL with parameters, or
  2. Reduce unnecessary parameters, or
  3. Increase the QR size and keep styling simple.

Test matrix (fast but effective)

Before publishing or printing, do a quick scan matrix:

  • At least 2 phones (ideally iOS + Android)
  • Different camera apps (native camera + one QR scanner app if needed)
  • Different lighting (indoor + near a window)
  • Different distances (close + realistic distance)

If any combination struggles, increase size and margin and simplify colors.

Before you print thousands of items, run a quick “proof” workflow:

  1. Export SVG when possible (best scaling).
  2. Keep the quiet zone intact (don’t crop too close).
  3. Use solid colors and strong contrast.
  4. Print a proof on a normal printer and scan from realistic distance.
  5. Test on multiple phones (iOS + Android if possible).

Troubleshooting

If it won’t scan, fix in this order:

  1. Increase contrast
  2. Increase margin
  3. Increase size
  4. Simplify styling

If you have a logo, temporarily remove it. If scanning immediately improves, reduce logo size, raise error correction, and increase overall QR size.

FAQ (quick answers)

Should I use “Medium” or “High” error correction?

Use Medium for most QR codes. Use High when you add a logo or expect rough print conditions. If the QR becomes too dense, increase size.

Why does the preview look slightly blurry?

On-screen previews often scale to fit a container. Your exported PNG/SVG is the source of truth. For maximum sharpness, export SVG or increase PNG size.

Can I track how many people scanned my QR code?

Yes — track the destination URL using UTM parameters and analytics. The QR image itself is static; the measurement happens at the destination.

Final pre-publish checklist

Before you ship a QR code to customers, do these last checks: scan from realistic distance, verify the destination URL, confirm margin is intact after export/print, and test in low light. Small checks prevent expensive reprints and broken campaigns.

Privacy note

Toolvento’s QR generator is designed to work locally in your browser. Still, treat printed QR codes as public and avoid encoding secrets into materials anyone can scan.

Create your QR code now

  • /de/tools/design/qr-code-generator
Verwandte Tools
Online-Audio-Trimmer Stilvoller Barcode-Generator Favicon- und App-Icon-Generator Hintergrund entfernen Bildkomprimierung
← Zurück zum Blog
← Vorherige Nächste →