JPKCom DB

QR — Examples

QR walk-throughs: URL with logo, WiFi login, vCard, gradient with contrast check, transparent export, text from a file, calendar event and location.

Back to overview: QR · Open the live tool: www.jpkc.com/tools/qr/

This page shows the QR code generator through concrete walk-throughs. How the individual functions work in detail is covered in the manual.

Example 1: URL with a logo in the center

Goal: a scannable link to your own site, branded with a logo.

  1. Set Content Type to URL and enter the address, e.g. jpkc.com (the tool adds https:// itself).
  2. In the Center Image / Logo card, upload your logo (PNG or SVG). Note: once the logo is set, error correction jumps to High (H) automatically.
  3. Set Image Size to about 30–40% to taste; leave Hide dots behind image on so the logo stands out cleanly.
  4. Check the scan test below the preview: if it says "Scan test: the image decodes to exactly this content.", the code reads despite the logo. If the test reports a failure, reduce Image Size step by step until it turns green.
  5. Download as SVG.

Result: a branded QR code that scans reliably even with the center covered, thanks to level H. Always test with a real phone before printing (see Tips).

Example 2: A scannable WiFi login

Goal: let guests join the WiFi without typing the password.

  1. Set Content Type to WiFi Network.
  2. Fill in Network Name (SSID) and Password, and leave Security on WPA/WPA2 (also WPA2/WPA3 mixed) — that fits most networks, including WPA2/WPA3 transition mode. Only pick WPA3 only (SAE) for a pure WPA3 network.
  3. If the network is hidden, switch on Hidden network.
  4. Leave the Quiet zone of 4 modules (recommended) toggle on — it provides the light border that cameras need on a printed notice.
  5. Download as PNG for printing; the file is named after the SSID, so "Café Bar 1" becomes qr-wifi-cafe-bar-1.png.

Result: scanning offers to connect directly on most phones. The tool encodes the format WIFI:T:WPA;S:…;P:…;; automatically and escapes special characters such as ;, , or : in the SSID and password.

Example 3: A contact card (vCard) for a business card

Goal: encode phone, mail and website as a digital business card.

  1. Set Content Type to vCard (Contact).
  2. Fill in First Name, Last Name, Organization, Phone, Email and Website — empty fields are omitted. Accented names are no problem; the tool encodes them as UTF-8.
  3. Raise Error Correction to Q or H, because the printed code should be more robust. The capacity line below the preview shows how much the version and module count grow as a result.
  4. Export as SVG so it scales losslessly for print.

Result: a QR code that offers to create a contact when scanned. Internally it produces a vCard 3.0 with the lines N:, FN:, ORG:, TEL:, EMAIL: and URL:; commas and semicolons in the company name are escaped along the way.

Example 4: A styled code with a gradient and rounded dots

Goal: a code that matches your brand — not the default black-and-white.

  1. Enter content as in Example 1 (e.g. a campaign URL).
  2. In Dots Options, set the style to Rounded or Classy rounded.
  3. Switch the dots' color block to Gradient, choose Color 1 and Color 2 in your brand colors, pick Linear and a Rotation of, say, 45°.
  4. In Corners Square Options, set the style to Extra rounded — for softer corner markers.
  5. Read the warnings below the preview: if one of the gradient colors is too light, the tool reports "Low contrast" (below 3:1) or "Contrast … is borderline" (below 4.5:1). Darken Color 1 or Color 2 until the warning disappears and the scan test is green.
  6. Download.

Result: a colorful, rounded code in your brand look. The contrast check measures every color stop against the background — more on that in the Tips.

Example 5: A transparent background for print

Goal: place a code on a colored or printed surface.

  1. Enter your content.
  2. In Background Options, switch on Transparent background — the background area disappears, and the tool reminds you to place the code on a light, plain surface.
  3. Choose a dot color that clearly contrasts with the eventual surface (dark dots on a light background).
  4. Export as SVG, PNG or WebP — not JPEG, because JPEG has no transparency: the transparent background turns black, and with dark dots the code becomes unreadable.

Result: a code with a transparent background that embeds cleanly into a layout. The automatic quiet zone is transparent too — so still plan a calm, sufficiently contrasting area around the code on the surface.

Example 6: Encode a long text from a file and copy it as SVG

Goal: pack a longer text from a .txt file into a code and reuse it directly.

  1. Leave Content Type on Plain Text (the default).
  2. Click Upload .txt and pick the text file — its content lands in the text area.
  3. Read the capacity line below the preview, e.g. 1,480 / 2,331 bytes · version …. If the code gets very dense, lower Error Correction to L (up to 2953 bytes). If the text is too long, the tool creates no code and reports "Too much content" along with the maximum.
  4. Click Copy SVG to put the SVG markup straight on the clipboard.

Result: you can paste the SVG immediately into an HTML page, a design file or a document without saving a file first.

Example 7: An event on the invitation flyer

Goal: anyone who scans the flyer gets the event into their calendar with one tap.

  1. Set Content Type to Calendar Event.
  2. Enter Title (e.g. Summer Party), Location (e.g. Augsburg, courtyard), Start and End, plus an optional Description.
  3. Enter start and end in local time: the tool writes the times into the code without a time zone ("floating"), and the phone adopts them in its own time zone.
  4. Export as SVG for print; the file is named qr-event-summer-party.svg.

Result: scanning offers to add the event to the calendar. Internally the tool produces a block from BEGIN:VEVENT to END:VEVENT with SUMMARY, LOCATION, DTSTART, DTEND and DESCRIPTION. This works well for events in the same time zone as the audience — for online events across time zones, also state the time in the flyer text.

Example 8: A location for directions and notices

Goal: visitors open the meeting point straight in their map app.

  1. Set Content Type to Location (Geo).
  2. Enter Latitude and Longitude in decimal degrees, e.g. 48.3705 and 10.8978 (values outside ±90 or ±180 produce no code).
  3. Download the code as PNG and put it on the notice.

Result: the tool encodes geo:48.3705,10.8978; scanning opens the place in the map app. For a phone hotline next to it, use the Phone Call type, which turns +49 821 123456 into tel:+49821123456.

More on the individual functions is in the manual, strategic notes and pitfalls in the tips & tricks. To get started right away, use the tool.