QR Code & Brand Overlay — Generate Branded QR Codes (High ECC)

Create scan-reliable, branded QR codes with a center logo and precise color control. This tool supports High-ECC (H) error correction, finder-eye styling, contrast safety checks, and SVG/PNG export—all locally in your browser.

Key Features

  • High-ECC (H): maximizes scan reliability even with a center logo overlay.
  • Center logo overlay: upload raster or vector (SVG), with optional knockout, border, and shapes (square/rounded/circle).
  • Vector logo recoloring: tint SVG fills/strokes for on-brand output.
  • Finder-eye styling: separate colors and corner radius for the three position markers.
  • Color controls + contrast checks: WCAG-style ratio guidance and one-click auto-fix.
  • Multiple content types: Text/URL, Wi-Fi, Email, SMS, Phone, Geo, and vCard.
  • Export formats: crisp SVG and high-resolution PNG (1×–4×, optional transparent bg).
  • Client-side & private: no uploads; everything runs in your browser.

Supported QR Content Types

  • Text / URL: any string or link.
  • Wi-Fi: SSID, security (WPA/WPA2/WEP/nopass), password, hidden flag.
  • Email: mailto: with subject and body.
  • SMS: sms: with message body.
  • Phone: tel: for click-to-call.
  • Geo: geo:lat,lng coordinates.
  • vCard: Name, organization, email, phone (v3.0).

How to Use

  1. Select a Content Type and fill in the fields (URL, Wi-Fi, vCard, etc.).
  2. Choose ECC = H for the most robust scanning, especially with a logo.
  3. Customize colors, finder-eyes, and module style (square/rounded/dots).
  4. Upload a logo (PNG/JPG/WebP/SVG). Enable knockout/border and adjust size/shape/radius.
  5. Check the contrast badge; click Fix Contrast if needed.
  6. Export as SVG for print or PNG for web (pick 1×–4×; optional transparent background).

Branding & Accessibility Best Practices

  • Keep the logo under ~30% of the QR width to preserve scannability.
  • Aim for a contrast ratio ≥ 4.5:1 between dark modules and the light background.
  • Use ECC H when overlaying logos or heavy styling.
  • Maintain a clear quiet zone (suggested 4 modules) around the code.
  • Prefer SVG for print and large formats; use PNG for screens.

Export Options

  • SVG: resolution-independent, ideal for print, signage, and vector workflows.
  • PNG: choose 1×–4× scale; optional transparent background for overlays.

Privacy & Performance

Conversions and rendering happen entirely in your browser. No images, logos, or text ever leave your device, making this tool ideal for sensitive campaigns and on-device batch work.

Troubleshooting

  • Not scanning? Increase contrast, reduce logo size, or bump ECC to H.
  • Blurry on print? Export as SVG or increase PNG scale to 3×–4×.
  • Logo clipped oddly? Adjust logo shape/radius or disable knockout temporarily.
  • Large payload errors: Use a higher QR version (or shorten URLs with a trusted shortener).