QR Code Generator
Customize
How it works
Type or paste any text, URL, email (`mailto:`), phone number (`tel:`), Wi-Fi credential, vCard or calendar event into the input. The QR code renders live as you type. Open the Customize panel to take full control of the appearance:
• Foreground & background colours: colour pickers plus hex input. Use brand colours instead of black-on-white, or pair them with a transparent background to drop the code onto any surface in design software. • Transparent background: when checked, the PNG and SVG export with full alpha so the code blends into any image, gradient or paper colour. • Size: a slider from 128 px to 1024 px for the rendered canvas. The exported PNG matches this resolution; the SVG is resolution-independent and scales losslessly. • Margin (quiet zone): the white border around the code. The QR spec requires at least 4 modules of quiet zone for reliable scanning, and some printed contexts demand more. • Error correction level: L (~7%), M (~15%, default), Q (~25%), H (~30%). Higher levels make the code denser but allow more of it to be damaged or covered before it stops scanning. • Logo overlay: upload any image (PNG, JPG, SVG, WebP) and it appears centred on the QR. Adjust the logo size between 10% and 30% of the QR area. An optional white padding rectangle behind the logo keeps the contrast crisp against the QR modules. Adding a logo locks error correction to H so the covered area is still recoverable.
Two export formats: • PNG: raster at the chosen pixel size. Right click and save, drag into Slack or email, embed in a slide deck. • SVG: vector, crisp at every size, which is what print, posters and business cards need. The logo, if present, is embedded inside the SVG as a base64 data URL so the file stays self-contained.
A QR code encodes data as a matrix of black and white modules. The smallest version stores about 25 alphanumeric characters; the largest (Version 40) stores around 4,300. The tool picks the smallest version that fits your input automatically, so shorter inputs produce smaller codes that are easier to scan. For URLs longer than ~200 characters, consider a short-link domain (bit.ly, short.io, your own) before encoding.
Typical workflows: a branded QR on a business card with your logo and brand colour; a menu QR printed on a restaurant table tent in dark-on-cream; a Wi-Fi join code laminated next to a router; a vCard QR for a conference badge; a calendar-event QR for the "Add to calendar" link in an email; a transparent QR overlaid on a hero image in a poster.
Everything runs client-side: the text you type, the logo you upload, the colours, and the generated images never leave your browser. Open DevTools → Network and confirm no outbound request fires while you customize and download.
Frequently Asked Questions
Can I add a logo or image in the centre of the QR code?
- Yes. Open Customize → Logo overlay and choose an image (PNG, JPG, SVG, WebP); the logo appears centred on the QR. A slider controls how much of the QR area it covers (10% to 30%) and a checkbox toggles a backdrop behind it for better contrast. Uploading a logo locks error correction to H (≈30% recovery) so the QR still scans with the centre obscured.
Can I change the shape and border of the logo backdrop?
- Yes. After uploading a logo you can pick the backdrop shape (Square, Rounded square, or Circle), set the padding amount (0–50% of the logo size), choose its colour, and optionally add a coloured border around it with adjustable thickness (1–10% of the backdrop side). The logo image itself is clipped to the same shape as the backdrop, so a circular backdrop also produces a circular logo cut-out, iOS-style. All settings carry through to the SVG export via inline <rect>/<circle> plus <clipPath>, so the downloaded file stays self-contained and editable in Figma or Illustrator.
Can I change the QR code colours?
- Yes. The Customize panel has colour pickers for both the foreground (the dark modules, default #212529) and the background (the light modules, default white). Use brand colours, dark on light, or light on dark. Keep the contrast ratio high (~4.5:1 minimum) so smartphone cameras still detect the code reliably.
Can I make the QR code background transparent?
- Yes. Tick "Transparent background" under the background colour picker. The PNG and SVG then export with full alpha, so the code can be dropped on any image, gradient or paper colour without a visible white square around it. The on-page preview shows a checkerboard so you can see the transparency.
What can I encode in a QR code?
- Any text content: plain text, a URL, an email address (mailto:), a phone number (tel:), an SMS (smsto:), a geographic location (geo:), a calendar event (BEGIN:VEVENT...), or a contact card (BEGIN:VCARD...). The QR spec puts no restriction on content, and it is up to the scanner to interpret the prefix.
How much data fits into a QR code?
- At the maximum version (40) with the lowest error correction (L), up to ~7,089 digits, ~4,296 alphanumeric characters, or ~2,953 bytes. In practice, keep URLs under ~200 characters: the resulting code stays small enough for a smartphone camera to lock onto it from a comfortable distance.
Which error-correction level should I pick?
- L or M for on-screen codes where nothing damages the image, Q or H for printed codes that live in the real world (menus, stickers, posters), because part of that surface will eventually be scratched, dirty, or covered. Overlaying a logo forces H automatically, since the logo covers some of the modules and the rest has to compensate. Higher correction means a denser code, so don't over-spec it.
What is the quiet zone (margin) and how big should it be?
- The quiet zone is the white border around the code, and the QR spec mandates a minimum of 4 modules. Scanners use it to detect where the code starts and ends. The tool defaults to 4 and lets you raise it up to 10 for printed contexts where the surrounding artwork could otherwise be confused for code modules. Don't set it to 0, because most readers won't lock on.
Can I download an SVG with the logo embedded?
- Yes. The SVG export includes the logo as an inline `<image>` element with a base64 data URL, so the resulting .svg file is self-contained and can be edited in Figma, Illustrator or Inkscape. The padding rectangle, if enabled, is added as an inline `<rect>` so it stays in the right z-order behind the image.
Why is my QR code not scanning?
- Four usual suspects: (1) the code is printed too small for the scanner's distance, so target at least 2.5 cm at arm's length and bigger on a wall; (2) the colour contrast is too low, so keep at least 4.5:1 between foreground and background; (3) the logo is too large or the error-correction level too low to cover it, so stay under 25% logo size with H error correction; (4) the quiet zone (margin) is 0 or 1, and scanners need at least 4 modules of blank space around the code.
Can I encode a password or sensitive data?
- You can, but anyone who photographs the code has your password. QR codes are optimized for sharing, not for secrecy, so treat the code exactly as you would the plain-text content: safe for public posting, unsafe for private data. The WiFi QR Code Generator tool is the everyday example: it works, and the password is visible to anyone who scans or photographs the result.
Is my data and logo safe?
- Yes. The QR image and the logo overlay are processed entirely in your browser using a client-side library: no server, no upload, no logging. The logo file is read into memory via FileReader and is never transmitted. You can verify by opening DevTools → Network and confirming no outbound request fires while you customize, generate or download.
QR error correction levels: what fits and what survives
QR codes embed redundant error-correction data so part of the code can be damaged or obscured and the reader still recovers the content. Picking the right level is a trade-off between code density and resilience.
| Level | Recovery | Logo coverage OK | Typical use | Trade-off |
|---|---|---|---|---|
| L | ≈ 7% | Up to ~5% (no logo recommended) | On-screen codes shown briefly (slide decks, video overlays) | Smallest, densest code: most data per byte. Fragile in print |
| M | ≈ 15% | Up to ~10% (small logo only) | Default. Web banners, emails, anywhere the code is clean | Balanced. Roughly 10% more modules than L |
| Q | ≈ 25% | Up to ~20% | Printed marketing materials, stickers, packaging | More modules per character, so the code is denser but tolerates wear |
| H | ≈ 30% | Up to ~25% (full logo overlay) | Branded QRs with a centre logo, outdoor signage, table tents | Densest. The tool forces this level when you upload a logo |
Recovery percentages are from the ISO/IEC 18004 QR specification. Logo coverage guidance is empirical: actual safe coverage depends on which modules the logo obscures (centre is safer than near the finder patterns at the three corners).