Generate a QR code

How to use it#

1. Choose what the code is for: text or a website link, a wifi network, a phone number, a text message, an email, or a contact card.
2. Type the link or text, or fill in the details that mode asks for. The page shows what the code holds.
3. Pick an error correction level if the code will be printed or is likely to get scuffed.
4. Choose a style: square modules, rounded ones that join into smooth shapes, or dots.
5. Drop a logo in if you want one in the middle. Low correction greys out while it is there, and High gives the logo the most room.
6. Download it as an SVG for print, or a PNG for anywhere that will not take one.

Take the SVG unless something refuses it#

A QR code is a grid of squares, which makes it exactly the kind of image a vector format was invented for. An SVG is a few kilobytes, stays razor sharp at any size, and can be scaled up to fill a poster without the edges going soft. A PNG is fixed at the size it was written, and blowing one up is how you get a code that will not scan.

The PNG here is rendered at 1024 pixels, which is enough for a business card or an A4 page. Take it when you are pasting into something that will not accept an SVG, which in practice means some older design tools and a lot of print portals.

What error correction actually buys#

A QR code carries redundant data so it can still be read when part of it is obscured. The four levels recover roughly 7, 15, 25, and 30 per cent of the code. The cost is size: the same content at the highest level needs a denser grid, so each square is smaller at the same printed dimensions.

Medium is the right default for a screen or a clean print. Go higher if the code will be on something that gets handled, printed small, or has a logo placed over the middle. Going higher than you need makes the code harder to scan at a distance rather than easier, because the squares shrink.

A logo in the middle, and what it costs#

Putting a logo on a QR code is not a feature of the format. It works by covering modules and relying on the error correction to reconstruct them, which means every pixel of logo is spent out of the same budget that copes with a scratch, a fold, a glare off the laminate, or a phone held at an angle.

The budget is not shared across the whole code, though. The error correction is split into blocks, each able to repair only its own damaged codewords, and a square in the middle can land on more of one block than it can mend, at which point the whole code fails. A logo over 8% of a short link at Medium does exactly that. So the size here is worked out from where the codewords fall on your code, keeping every block to two thirds of what it can repair. At High that usually comes to between a tenth and a sixth of the area, and at Medium nearer a twentieth. Medium has no room at all on the two smallest sizes of code and Quartile none on the smallest, so a short link with a logo is drawn a size or two larger. Low greys out while a logo is in, and a code set to Low moves up to Medium. A wide or tall logo gets a box in its own shape, up to three times as long as it is high, so a wordmark is not shrunk to fit a square. The page says what share your logo is covering.

A light pad is drawn behind the logo so a transparent one does not sit over half-visible modules, which confuses scanners more than a solid block does. Even within these limits, scan the finished code with an actual phone before committing it to print.

Rounded and dotted codes hold the same data#

The style changes how each module is drawn, not what the code holds. A scanner reads a QR code by sampling the middle of each module and asking whether it is dark, so a dot or a rounded corner reads exactly like a square, and the same link comes out of all three. Rounded joins neighbouring modules into smooth runs and turns a lone one into a circle; Dots draws every module as a separate round dot.

The three big squares in the corners are what a scanner finds first, so in the rounded and dotted styles they stay solid rings with softened corners rather than being broken into dots. Squares are still the safest choice for a code printed very small or read by an old scanner at a till, because they put the most ink in each module. For a poster, a menu, or a business card, any of the three scans with a phone camera, but scan the finished code before you print it. With a logo in, Dots holds up to about 200 characters at High and 400 at Medium. Past that the code is drawn in Rounded, and goes back to Dots if the text gets shorter: in testing, the QR reader built into Apple's devices lost larger dotted codes with any patch in the middle, even one covering 1% of the area.

The quiet zone is not optional#

Every code here is drawn with the four-module white border the specification requires. Scanners use it to find where the code starts, and a code cropped tight to its edges or pasted straight onto a coloured background is the single most common reason one will not read.

For the same reason the code is drawn black on white regardless of whether you are reading this page in dark mode. An inverted code, or a low-contrast one in brand colours, is a code that works on your phone and fails on somebody else.

Making a wifi QR code#

Choose Wi-Fi, then type the network name and password exactly as your router has them, since both are case sensitive. WPA or WPA2 covers almost every home router, WEP is for a very old one, and None is for an open network with no password. Tick Hidden network only if the name does not appear in the list of networks, because a phone then has to be told to look for it.

Guests point their camera at the code and tap to join, so nobody has to type the password. The page shows the text the code carries, in the format phones read: WIFI:T:WPA;S:network;P:password;; with a backslash put in front of any semicolon, comma, colon, double quote, or backslash in the name or password. You can also type that text into the Text mode yourself. Either way, scan the code with your own phone before printing it.

What you can put in one#

Anything that is text. A website link is the common case, and a restaurant menu, a review page, a sign-up form, or a PDF you have put online all work the same way, through their link. It is worth using a short one, because every character makes the grid denser and the squares smaller. For a website, paste the address with its https:// so every phone treats it as a link rather than as words. A WhatsApp chat works the same way, through the link wa.me/ followed by the number in international format with no + or spaces.

A phone camera also acts on a few other formats, which the modes build for you. The Phone mode makes a code that offers to call the number. It keeps a leading + and drops the spaces and brackets people write numbers with. The SMS mode opens a new text to the number with your message already written, which the person scanning still has to send. The Email mode opens a new email to the address, with the subject and message filled in if you give them. The Contact mode makes a card the phone offers to save to its contacts.

The limit is about 2,900 bytes at the lowest correction level and around 1,270 at the highest, and the page tells you the moment you go over. Bear in mind that is bytes rather than characters: an emoji is four of them.

A contact card in a code#

Choose Contact and fill in what you want on the card. It needs a name or an organisation, and every other field is optional and left out of the code when it is empty. Scanning it with an iPhone or Android camera offers to add the contact, with the phone, email, job title, website, and address each in its own field.

The code holds a vCard in version 3.0, the version an iPhone writes when it shares a contact. A comma, semicolon, or backslash in what you type gets a backslash in front of it, and a line break in the address is written as \n. That way a surname like "Smith, Jr" stays one name instead of splitting in two. The page shows the card line by line, so you can check what a phone will read.

A card holds more than a link, often 150 to 300 bytes, so the code comes out denser and each square smaller. Leave out what the person scanning does not need, keep the error correction at Medium unless there is a logo, which gets more room at High, and scan the finished code with your own phone before it goes on a business card.