Contact QR code generator (vCard)

What this tool does

It writes your details as a vCard, the common file format for contacts, and stores the vCard in a QR code. A phone or scanner app that understands vCards shows the contact and offers to save it.

The details are processed by your browser only. They are in the code and nowhere else.

How to use it

1. Enter a first name, a last name or an organization. One of them is needed; everything else is optional.
2. Add only the details that people really need. Every field makes the code finer.
3. Write the phone number with the country code, starting with a plus sign, so that it works from abroad.
4. Create the code, scan it with your phone and check how the contact looks before you print it.

How the code is made

The tool builds a vCard of version 3.0 with one line per detail: N and FN for the name, ORG for the organization, TITLE for the job title, TEL, EMAIL and URL, and ADR for the address. Empty fields are left out. Lines end with a carriage return and a line feed, as the format requires.

In a vCard, commas and semicolons separate the parts of a value. Where they occur in your text, the tool puts a backslash in front of them, and it doubles a backslash of your own. A company name like Smith, Jones; Partners therefore arrives as one name and not as three.

The vCard is then stored in the code as UTF-8 text, in the same way as in the tool for links and text.

Worked example

A contact with the name Ana Silva, the phone number +1 555 010 0199 and the address ana@example.com gives a vCard of 111 bytes. At level M that is a code of version 7 with 45 by 45 modules.

With an organization, a job title, a website and a full postal address the same contact has 222 bytes and needs version 11 with 61 by 61 modules. On a business card of normal size, the short version is much easier to scan.

Colours, logo and the automatic check

Under “Colours and logo (optional)” you can choose the colour of the code and of the background, and put a logo from your device in the middle. The logo is opened by your browser and is not uploaded. The SVG file contains it as an embedded image, and the modules stay vector shapes.

A code needs contrast. The tool compares the luminance of the two colours: 0% for two equal colours, 100% for black on white. Below 40% it does not create the code, and below 70% it warns. These limits are our convention, borrowed from the grades of symbol contrast in ISO/IEC 15415, the print-quality standard for two-dimensional codes; colours on a screen only approximate printed ink. A code that is lighter than its background is read by some scanners and not by others, so the tool warns about that as well.

With a logo the tool always uses error correction H and leaves a square in the middle free of modules, about 22% of the width of the code, which is 3% to 6% of its area. Level H can restore about 30% of the codewords.

Before the download buttons work, the tool reads the finished PNG image back with a separate decoder (jsQR) and compares the text with what you entered. A coloured code or a code with a logo that does not read back is not offered for download. For a plain black-and-white code a failed check is only reported, because the encoder itself is tested with two decoders. The check shows that this decoder reads the image in your browser; it does not replace a test with real phones.

Common mistakes

• Filling in every field. For a small print keep to name, phone and email, or link to a contact page with the tool for links.
• A phone number without the country code.
• Details that change soon. A printed code cannot be updated; a new job title means a new code.
• Forgetting that the code is public. Everybody who scans it gets all the details in it, so leave out what is private.
• Printing the code very small. A contact code has many modules. Print it as large as the layout allows and test it.

Sources

• Cognex: ISO/IEC 15415 grading, symbol contrast
• RFC 2426: vCard 3.0
• ZXing project: contact formats in codes