QR Code Generator with Logo
Generate branded QR codes with a custom logo overlay.
- Free
- No signup
- Files never leave your browser
How to use the QR code generator
- Paste your link or text. URLs are the most common payload, but the encoder handles arbitrary text — vCards, WiFi join strings, raw JSON, plain prose. Longer input automatically uses a larger QR version (more modules per side).
- Pick an error correction level. Higher levels add redundancy: the code stays readable even with smudges, partial damage, or a centered logo. If you plan to overlay a logo, jump straight to H.
- Choose colors. Foreground and background pickers accept any web color. Keep the foreground noticeably darker than the background; thin contrast is the #1 reason scanners fail.
- Add a logo (optional). Upload an image — a small white rounded-rect appears behind it for legibility. The size slider runs 10–30%; the tool warns you when the chosen size exceeds what the error correction level can absorb.
- Download. Click Download PNG to save. Always test the result with a phone before printing at scale.
Error correction at a glance
QR codes encode redundancy using Reed–Solomon error correction. The four levels recover increasing fractions of the code if it is partially damaged:
| Level | Recovery | Typical use |
|---|---|---|
| L | ~7% | Clean digital placements where every pixel survives. |
| M | ~15% | Default — print, screen, most web embeds. |
| Q | ~25% | Print exposed to wear; small logo overlay. |
| H | ~30% | Logo overlay, harsh environments, very small physical sizes. |
Higher levels make the QR code denser (more modules in the same physical space), which slightly raises the minimum printable size, but every modern phone scans them fine.
Designing a branded QR code
- Keep the logo central and below 25% of the width. Most scanners can recover the overlapped modules at H, but the safety budget shrinks fast above 25%.
- Pad the logo with a backdrop. This tool adds an automatic white rounded-rect. If your design uses a dark background, that white halo is intentional — it gives scanners a clean edge.
- Avoid placing logos over the three finder patterns. The big squares in the corners are how scanners find the code; covering them breaks the scan. The centered logo never touches them.
- Test contrast on a phone, not just on screen. Camera sensors compress dynamic range. A pair that looks fine on a monitor may scan poorly under fluorescent light.
- Use a vector logo when possible. SVG/PNG with transparency keeps edges sharp at any export size; JPG artifacts can confuse scanners.
Print versus screen
A QR code prints reliably if each module (the smallest black square) prints at at least 0.4mm. For a code with 33 modules per side (typical for short URLs at ECC M), that is ~1.3cm overall — but bump that up if scanners need to read it from a meter away. Rough rule: the code should be ~10× the scan distance × min module size.
Choose 1024px output for print, 512px for web; PNG is lossless either way.
Privacy and security
The QR code generator is a single HTML page with a small JavaScript bundle. Your text, logo file, and color choices stay on your device — there is no server-side processing. The share link encodes settings (not the logo image) in the URL fragment (#…), which the browser does not send to servers. Verify by opening DevTools → Network and watching while you type or click around.
Related tools
- JSON to CSV Converter — convert between JSON and CSV in your browser.
- Regex Tester — test and explain regular expressions live.
Frequently asked questions
Can I add my own logo to the QR code?
Yes. Upload a PNG, JPG, WebP, or SVG image and it will be centered on the QR code with a small white rounded backdrop for contrast. Use the slider to set the logo at 10–30% of the QR width. A white halo behind the logo helps scanners ignore the overlapped modules.
Will adding a logo break the QR code?
Only if the logo is too big for the chosen error correction level. QR codes can recover from missing data up to: L 7%, M 15%, Q 25%, H 30%. If your logo covers more than the budget, the tool warns you. Rule of thumb: use error correction H and keep the logo at ~20% of width.
Does my data or logo leave my browser?
No. Encoding and rendering happen 100% client-side using HTML canvas. Open DevTools → Network while you generate a code — you will see no requests. The share link encodes settings in the URL fragment (after #), which the browser does not send to servers.
What size should I download?
For screen use, 512px is plenty. For print, pick at least 1024px and verify a 2cm-wide print scans from 20cm away. Larger output also gives the embedded logo more pixel resolution. PNG is lossless, so quality does not degrade with size.
Which error correction level should I use?
No logo? M is the standard. With a logo, jump to H — it tolerates up to 30% damage, which covers a reasonably sized overlay. Higher correction makes the QR matrix denser (more modules), but a phone scanner does not mind.
Why does my colored QR code not scan?
Scanners need contrast. The foreground must be much darker than the background. Avoid red-on-green (some scanners struggle) and very low contrast pairs like light grey on white. If in doubt, stick to a dark color on a near-white background.
Can I share a link to recreate the QR code?
Yes — click Copy share link. It saves the text, error correction, size, colors, and logo size in the URL hash. It does NOT include the logo image (browsers cannot encode a file in a URL safely). You will need to re-upload the logo after opening the link.
What characters can the QR code encode?
Anything — URLs, plain text, vCards, WiFi credentials, Bitcoin addresses, JSON. The library auto-picks the most efficient encoding (numeric, alphanumeric, byte, or Kanji). Longer content needs a denser matrix, which is rendered automatically.
Is this tool really free?
Yes. No signup, no watermark, no usage limit, no ads. The whole tool runs in your browser tab. Generate as many QR codes as you like.