Skip to content
Son Tran (Snow)
All posts
  • Note
  • #qrcode
  • #open-source

Make a custom QR code in your browser

A free QR code generator with custom dots, corners, colors and a logo, plus a link you can paste into any image tag.

https://qrcode.ttsalpha.com is a free QR code generator. Type a link or text, pick a style, and download the image. No sign-up.

It runs on @ttsalpha/qrcode, the library I wrote for developers. If you write React, there is a separate post about the library. This one is for everyone else.

Make one

  1. Open https://qrcode.ttsalpha.com
  2. Type the link or text you want the code to open
  3. Pick the look: dot shape, colors, corners, and an optional logo
  4. Download the image

You can save it as SVG, PNG or JPG. SVG stays sharp at any size, so it is the one to use for print.

What you can change

  • Dots: square, circle, or rounded, where neighbouring dots join into one shape
  • Colors: the dots, the background (or transparent), and the corner frame and the corner center separately
  • Corners: the outer frame can be square, rounded, extra rounded or circle; the inner block can be square, rounded or circle
  • Logo: an image in the center, with optional rounded corners
  • Size and margin: the image size and the blank border around the code

Use a link instead of a file

The playground also gives you a link you can paste anywhere an image fits: a web page, an email, a document. Set up your code, then press Copy link.

<img src="https://qrcode.ttsalpha.com/qr?data=https://example.com&dot=rounded&color=14b8a6&format=png" alt="QR code" />

The link holds everything: what to encode, the format (svg, png or jpg), the colors as plain hex like 14b8a6, the dot and corner styles, and a logo URL. The same link always gives the same image.

The content of the code is part of the link. Do not put anything private in it.

Make sure it scans

A good-looking code that does not scan is useless. A few things to check:

  • Keep contrast high. A dark code on a light background scans best
  • Go easy on the logo. A bigger logo covers more of the code. The tool raises the error correction automatically to compensate, but a very large logo still makes scanning harder
  • Be careful with round corners. Scanners look for the square corner markers, so a fully circular frame looks nice but is less reliable
  • Test at the real size. Print it or put it on a screen at the size people will see it, then scan it with a phone

For developers

If you want to generate codes from your own app, the same tool is available as a React and React Native library. Read the post about it, or go straight to the docs.