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
- Select a Content Type and fill in the fields (URL, Wi-Fi, vCard, etc.).
- Choose ECC = H for the most robust scanning, especially with a logo.
- Customize colors, finder-eyes, and module style (square/rounded/dots).
- Upload a logo (PNG/JPG/WebP/SVG). Enable knockout/border and adjust size/shape/radius.
- Check the contrast badge; click Fix Contrast if needed.
- 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).