How to use QR Code with Logo
- 1. Add your content and logo. Any content type works. Upload PNG, JPG, or SVG — error correction rises to Q automatically.
- 2. Match your brand. Module and eye shapes, solid or gradient fills, optional transparent background for dark designs.
- 3. Trust the verifier. The studio scans its own output with a real decoder — export only when the badge says verified.
About this tool
Logos work because QR error correction is designed for damage: at level H, up to ~30% of modules can be missing and the code still decodes. The craft is keeping the logo inside that budget while shapes and colors preserve the patterns scanners lock onto.
The three rules of branded codes
Keep the logo under ~25% of the code width. Keep contrast above 3:1 between modules and background. Never restyle the three corner eyes beyond recognition — they are how scanners find the code at all.
Why the test scan matters
Every styling choice spends error-correction budget. This studio decodes your exact styled output with jsQR on every change, so 'looks fine' and 'actually scans' are never different discoveries — the second one usually happens after printing.
Code examples
Website / direct link payload
https://example.com/menuWi-Fi payload
WIFI:T:WPA;S:MyNetwork;P:hunter2;;UPI payment payload
upi://pay?pa=name@okbank&pn=Shop&am=150.00&cu=INRLocation (Google Maps) payload
geo:28.6139,77.2090?q=28.6139,77.2090vCard contact payload
BEGIN:VCARD
VERSION:3.0
N:Singh;Kamal
FN:Kamal Singh
TEL:+911234567890
EMAIL:kamal@example.com
END:VCARDGenerate the same QR code in JavaScript (free API, no server)
import QRCode from "qrcode";
const svg = await QRCode.toString("https://example.com", {
type: "svg",
errorCorrectionLevel: "H",
margin: 4,
});