How QR Codes Work and How to Make One That Scans
Choose what the code should do, fill in the fields, and the QR code updates as you type. It is generated entirely in your browser, so nothing you enter — a WiFi password, a phone number, a private link — is ever sent to a server. Download it as a PNG for social posts and documents, or as an SVG when it needs to be printed large without going blurry.
A QR code is not a link to something stored elsewhere. It is the content itself, encoded as a grid of black and white squares. That matters more than it sounds: a code generated here has nothing behind it that can expire, be rate-limited, or stop working because a company shut down a service. Once it is printed, it keeps working.
At a glance
- Everything is generated in your browser — no data leaves your device, and there is no account to create.
- The scanability check does not just guess: it rasterises your finished code and runs a real decoder over it.
- Codes never expire, because the content is stored inside the code itself rather than on someone's server.
- Choose SVG for anything that will be printed; PNG is fine for screens and social posts.
- If you add a centre logo, set error correction to High so the code still scans.
How to use this tool
Pick what the code should do
Website, plain text, email, phone, SMS, WiFi, WhatsApp or a social profile. Each type builds a different payload behind the scenes, which is what tells the phone whether to open a browser, start a call or join a network.
Fill in the fields
The preview updates as you type. Underneath it you can see exactly what has been encoded, which is worth a glance before you print anything — it is the quickest way to catch a typo in a phone number or a missing letter in a domain.
Set the colours and size
Keep strong contrast between the code and its background. Dark code on a light background is the safest combination; light-on-dark works on many modern phones but not all older ones.
Open Design and make it yours
Three tabs: Frame adds a caption and border, Logo puts your mark in the middle, and Color & Shape controls the module shapes, finder eyes, gradients and background. Every preset tile is a live QR code, so what you see on the tile is what you get.
Watch the scanability score
It updates with every change, explains what is risky and why, and separately reports whether a real decoder could actually read the finished code. Save a look you like and reuse it later.
Download and test on a real phone
PNG for screens, SVG for print. Then scan the finished file with an actual phone, at the size you plan to use it, before committing to a print run.
What each code type actually does
The squares encode a text string, and the phone decides what to do based on how that string is formatted. These formats are conventions that phone cameras have supported for years, and getting a character wrong usually means the scan silently does nothing rather than showing an error.
- Website — a plain URL. If you type a bare domain, https:// is added for you.
- Plain text — shows the text on screen and nothing else. Useful for serial numbers, instructions or a short message.
- Email — opens a new email with the recipient, subject and body already filled in.
- Phone — starts a call. Spaces and brackets are stripped, since only digits and a leading plus are valid.
- SMS — opens a new text message to a number, with your wording already in the box.
- WiFi — joins the network directly. Semicolons and colons in the name or password are escaped, because those characters are the format's own separators.
- WhatsApp — opens a chat with a pre-filled message, using WhatsApp's own wa.me link format.
- Social profile — builds the profile URL for the network you choose, so you only type the username.
Error correction, and why it matters
QR codes carry redundant data so they still work when part of the code is damaged, dirty, or covered. The error correction level sets how much redundancy is built in, from Low at roughly 7% up to High at about 30%.
Higher correction means a denser code, because that redundancy has to go somewhere. For a short URL this is barely noticeable. For a long one, jumping from Low to High can visibly increase the number of squares, which makes the code harder to scan at small sizes — so higher is not automatically better.
The rule of thumb is simple: use Medium for most things, Quartile for anything printed on a menu, sticker or poster that will get handled, and High whenever there is a logo in the middle. The logo is effectively deliberate damage, and High correction is what lets the code survive it.
Sizing a code so it actually scans
The usual guidance is that a code should be at least a tenth of the distance it will be scanned from. A code read from arm's length — a business card or a menu — works down to about two centimetres. A poster read from three metres away needs a code roughly thirty centimetres across.
Leave the quiet zone alone. That is the blank margin around the code, and it is not decorative padding; scanners use it to find where the code starts. Cropping tight to the squares is one of the most common reasons a printed code fails.
This is also why SVG matters for print. An SVG is drawn from coordinates rather than pixels, so it stays perfectly sharp at any size. A 400-pixel PNG blown up to fill a poster will have soft, fuzzy edges, and soft edges are exactly what a scanner struggles with.
Static codes and dynamic codes
The codes here are static: the destination is encoded in the squares themselves and cannot be changed afterwards. Dynamic codes, which most paid services sell, encode a short redirect URL owned by that service, which then forwards to wherever you point it.
Dynamic codes let you change the destination and see scan counts. The trade-off is that your printed code now depends on someone else's service staying online and staying free. Plenty of businesses have discovered this the hard way when a trial expired and every code they had printed stopped working.
If you need to change the destination later, the safer approach is to point a static code at a URL you control — a page on your own domain, or a redirect you own — and change where that page goes. You get the flexibility without handing control of your printed material to a third party. Our URL Cleaner and UTM Campaign Builder are useful here for tidying and tagging the destination before you encode it.
Tracking scans without a paid service
Because a QR code is just a URL, you can tag it the way you would tag any other link. Add UTM parameters to the destination before you generate the code, and every scan shows up in your analytics under a source and campaign you chose.
Give each placement its own tag — the table tent, the window sticker, the flyer — and you can see which one people actually use. That is most of the value dynamic codes are sold on, available for free, and it survives the service you generated the code with disappearing.
One caution: longer URLs make denser codes. If your tagged URL is very long, shorten the path on your own domain rather than adding another dependency, and keep the tags themselves short.
Why this tool tests the code rather than scoring it
Most QR designers give you a traffic light based on rules of thumb: enough contrast, logo not too big, quiet zone present. Those rules are useful and they are also incomplete, because they describe the settings rather than the result.
So there are two layers here. The first is the usual set of checks, and they explain themselves — a contrast ratio with a number attached, a logo measured against exactly how much damage your error-correction level can recover. An error-level finding caps the score, so the tool cannot show you a comfortable green while a genuine blocker sits in the list.
The second layer rasterises the finished code, background image, logo, gradient and all, and runs a real QR decoder over it. That is the only thing in the whole tool that proves anything. It found two of our own design presets rendering as unreadable while every heuristic called them excellent, which is a good illustration of why the check exists.
Styled shapes, and the ones that do not work
The module shapes — rounded, dots, classy, diamond, vertical and horizontal bars — all decode reliably, because they change how each module is drawn without changing where the dark areas fall.
The three finder patterns in the corners are a different matter. A decoder locates a code by scanning a line through them and measuring a 1:1:3:1:1 ratio of dark to light. Rounded and circular eyes distort that ratio slightly and survive; a diamond eye rotates the square and destroys it outright.
That is why you will not find diamond finder shapes here. They look striking and they do not scan, and an option that quietly produces a broken code is worse than no option at all.
Background images without breaking the code
An unmodified photograph behind a QR code is the most reliable way to make it unreadable. The image has its own edges and dark patches, and the decoder cannot tell them apart from modules.
What makes it workable is muting the image until it reads as a soft wash: blur it enough that its own detail disappears, then lay a flat colour over it at 60% or more. The controls here default to exactly that, and the scanability panel tells you specifically when you have pushed the overlay or blur too low.
Even then, treat it as a design flourish rather than a safe default. Test the printed result on a real phone, in the light it will actually be scanned in.
Common reasons a code fails
- Not enough contrast — a mid-grey code on a light grey background may look elegant and scan badly.
- Inverted colours — light squares on a dark background are not universally supported.
- The quiet zone cropped away, leaving no margin for the scanner to lock onto.
- A logo that is too large, or added over a Low error correction code.
- A low-resolution PNG stretched to fill a large print area.
- Printing on a curved or reflective surface, which distorts the grid.
- A typo in the encoded content — always read the encoded text under the preview before printing.
A note on WiFi codes
A WiFi QR code contains the network name and the password in plain text. Anyone who scans it, or photographs it and decodes it later, has your password. That is the whole point of the format, and it is genuinely convenient for a cafe or a guest network.
It is a bad idea for your main network. Print WiFi codes for a guest network with its own password, keep them where you can see them, and change the password if a printed code goes missing. The code cannot be revoked — only the password behind it can.
Frequently asked questions
Does the scanability score actually test my code?
Yes. Alongside the usual contrast and logo checks, the finished code is rasterised and run through a real QR decoder. The panel reports that decode result separately, because it is the only part that proves the code reads.
Why are there no diamond-shaped finder patterns?
Because they do not scan. A decoder finds a code by measuring a 1:1:3:1:1 ratio of dark to light through the corner patterns, and rotating that square breaks the ratio. Diamond module shapes are available; diamond eyes are not.
Can I put an image behind my QR code?
Yes, with blur and an overlay so the image reads as a soft wash rather than competing with the modules. Drop the overlay too low and the scanability panel will warn you, and the decode test will usually fail outright.
Where are my saved designs stored?
In your browser's local storage on this device only. They are never uploaded, and clearing your browser data or switching browsers will lose them. Only the look is saved, not the content you encoded.
Do these QR codes expire?
No. The content is encoded in the code itself rather than stored on a server, so there is nothing to expire, no account to keep active, and no limit on how many times it can be scanned. A code you print today will still work in ten years.
Can I use these QR codes commercially?
Yes. QR code technology is patent-free and openly specified, and codes generated here are yours to use on packaging, menus, adverts, business cards or anything else without attribution or a licence.
Why does my code stop scanning when I add a logo?
The logo covers part of the data. QR codes tolerate a certain amount of damage through error correction, so raise the level to High (30%) whenever you add one. If it still fails, the logo is too large or the code is being displayed too small.
Should I download PNG or SVG?
PNG for screens, social posts and documents. SVG for anything printed, because it stays perfectly sharp at any size — a poster-sized code from a small PNG will have blurry edges, and blurry edges are what makes scanners fail.
Can I track how many people scan my code?
Not from the code itself, but you can add UTM parameters to the destination URL before generating it. Every scan then appears in your analytics under the source and campaign you chose, giving you the same insight paid dynamic codes offer.
Is it safe to put my WiFi password in a QR code?
The password is stored in plain text inside the code, so anyone who scans or photographs it can read it. That is fine for a guest network with its own password, but do not do it for your main network.
How small can a QR code be printed?
As a rough rule, the code should be at least a tenth of the distance it will be scanned from. Two centimetres works for something held in the hand; a poster read from across a room needs a much larger code. Always leave the blank margin around it intact.
Is my data sent anywhere when I generate a code?
No. The code is generated entirely in your browser using JavaScript. Nothing you type — including WiFi passwords and phone numbers — is transmitted to us or to anyone else.
Related tools
UTM Campaign Builder
Tag the destination URL before you encode it, so you can track scans in analytics.
URL Cleaner
Strip tracking clutter from a link so the resulting code is shorter and less dense.
URL Length Checker
Check how long your destination URL is — shorter URLs make simpler, easier-to-scan codes.
URL Encoder
Encode special characters correctly before putting a URL into a QR code.