QR Creator
Generate a QR code with real design control — dot or rounded modules, styled finder eyes, your own colors, and a logo in the center that still scans. Everything happens in your browser; nothing you enter here is ever sent anywhere.
What should the code do?
Design
Module style
Eye frame (the outer ring of the 3 corner squares)
Eye ball (the center dot of each corner square)
Logo (optional)
Adds your logo to the center, with error correction automatically raised to High and the logo capped at a safe size — the combination this tool (and every reliable QR+logo generator) relies on to stay scannable, not a workaround.
Your code
Your QR code will appear here as soon as you add some content above.
Fill in the fields above to generate your code.
SVG is vector — best for printing large (menus, posters, table tents) without ever looking pixelated. PNG is best for screens, social posts, or anywhere a plain image is expected.
Jargon index
Settings reference
Everything a developer can retune without touching the encoding logic lives in one CONFIG block at the top of qr-creator.js — see also the companion qr-creator-settings-reference.xlsx for the same table in spreadsheet form.
| Setting | Current value | What it does |
|---|---|---|
DEFAULT_FG | #1F6F5C | Default code color when the page first loads (the site's own brand teal). |
DEFAULT_BG | #FFFFFF | Default background color. |
DEFAULT_ECC_LEVEL | M | Error correction level a fresh session starts at. |
LOGO_SIZE_DEFAULT_PCT | 22% | Starting logo size, as a share of the code's width. |
LOGO_SIZE_MIN_PCT / MAX_PCT | 12% / 32% | Range the logo-size slider allows. |
QUIET_ZONE_DEFAULT | 4 modules | Margin around the code — the spec's own recommended minimum. |
PNG_EXPORT_PX_DEFAULT | 1000px | Starting PNG download resolution. |
| Dot module radius | 0.46 × module size | dotScale inside buildRenderPlan() — empirically scan-tested, see QR_CREATOR_NOTES.md before changing. |
| Rounded module corner radius | 0.3 × module size | roundedScale inside buildRenderPlan(). |
How this works
This page encodes your content into a real QR code itself, in your browser — it isn't a wrapper around another site's generator or API. qr-creator-engine.js implements the QR spec directly (Reed-Solomon error correction, mask selection, the works); qr-creator.js turns the result into styled shapes and draws them.
Because everything runs locally, nothing you type — a Wi-Fi password, a phone number, a logo image — is ever sent to a server. There's no Cloudflare Worker behind this tool and there doesn't need to be one.
Styling never touches the actual data: the three corner "eyes" and the general dot pattern can look however you like, but the underlying error-correction math is exactly what the QR standard requires — that's what keeps a styled, logo-bearing code just as scannable as a plain black-and-white one.