QR Code Generator User Guide

Create a QR code for a website, contact detail, message, or any other text, then download it as a PNG image. Use a simple black-and-white design or open the styling controls to create something more distinctive.

Always scan-test the finished QR code before publishing or printing it.

Quick start

  1. Enter the website address or text you want the QR code to contain in the Code field.
  2. Leave Error correction set to High (30%) unless you have a reason to change it.
  3. Choose the required Image size.
  4. Choose Create QR code.
  5. Scan the preview with at least one phone or QR reader.
  6. Choose Download QR code to save the PNG.

If sample designs are displayed, select one to load its content and appearance into the editor. You can then replace the content or customise the design.

Basic options

Error correction

Error correction helps a QR code remain readable if part of it is obscured, damaged, or covered by a centre image.

  • Low (7%) produces a less dense code but tolerates little damage.
  • Medium (15%) is suitable for many clean, simple codes.
  • Quartile (25%) provides greater resilience.
  • High (30%) is the safest choice for decorated codes and centre images.

Higher correction can produce a denser QR pattern. If you add a logo or apply strong styling, use High and test the result carefully.

Image size

The selected value is the actual width and height of the downloaded square PNG:

  • 256 × 256 for small on-screen use;
  • 512 × 512 for general use;
  • 768 × 768 for detailed designs;
  • 1024 × 1024 for larger display or print work.

Changing how large the preview looks on the page does not change the downloaded file dimensions.

Quiet zone

The quiet zone is the empty margin around the QR pattern. Scanners use it to separate the code from its surroundings.

  • Normal is recommended.
  • Wide can help when the code will appear near busy artwork.
  • Narrow saves space but may reduce reliability.
  • None should only be used when the surrounding design supplies a clear, contrasting margin.

Colours and images

Choose Advanced to show colour and image controls.

Every colour setting includes a colour swatch and a hexadecimal field beneath it. Use the picker or copy and paste a value such as #1a2b3c. A valid hexadecimal colour contains # followed by six numbers or letters from A to F.

Finder patterns

Finder patterns are the three large corner markers used by scanners. Their Outer square and Inner square colours can be set independently. Keep both colours clearly visible against the background.

Dots

The remaining dark modules are called dots. They can use a Solid colour, Linear gradient, or Radial gradient. For a gradient, choose primary and secondary colours and a direction. Maintain strong contrast across the whole gradient.

Background

The background can use a solid colour, linear or radial gradient, transparency, or a PNG/JPEG image. A transparent background produces a PNG with real transparency. Check that the code remains readable over everything on which it will be placed.

For a background image, Cover fills the square and may crop it; Contain shows the whole image and may leave space; Stretch fills the square but may distort it. PNG and JPEG images must be no larger than 1.5 MB.

Centre image

You can place a PNG or JPEG in the centre of the QR code and scale it from 5% to 40% of the QR width. PNG transparency is preserved.

A centre image hides part of the pattern. Use High (30%) error correction, keep the image reasonably small, and test with several phones before publishing.

Dot and finder geometry

Open Advanced, then choose More Advanced.

Dot geometry

Individual dots treats every dot separately. Connected areas joins dots that touch above, below, left, or right; corner-only contact does not join them. Circles makes dots individual and circular.

The four 0–50% corner-radius fields are arranged to match the corners they affect:

Top left     | Top right
Bottom left  | Bottom right

Enable Link corners to apply one value to all four corners.

Finder-pattern geometry

The top-left, top-right, and bottom-left finder patterns can be shaped independently. Each contains an Outer frame with separate outer-edge and inner-edge radii, plus an Inner pupil with its own radii. The frame and pupil also have independent Circle switches.

Use Link edges to keep both edges of one frame synchronised. Use Link finder patterns to apply finder settings across all three patterns. Test designs with large radius values carefully.

Saving and restoring a design

The Style code near the bottom of Advanced represents the current design as text.

Save a design

  1. Finish adjusting the options.
  2. Choose Copy style code.
  3. Store the copied text somewhere safe.

Restore a design

  1. Paste the complete saved value into Style code.
  2. Choose Load.
  3. Choose Create QR code to generate it with the current content.

A Style code can contain embedded background and centre images, so it may be very long. Do not edit it manually or share it if the embedded artwork is private.

Remembered settings and reset

Design options and the open or closed state of Advanced sections survive page reloads in the current browser tab. They normally disappear when that tab's browsing session ends.

Selected background and centre images may remain available in the same browser for later visits. QR content itself is not remembered.

Choose Reset Options to restore all design defaults, remove saved images, and close both Advanced sections.

Making a reliable QR code

  • Use a dark pattern on a light background whenever possible.
  • Keep a clear quiet zone around the complete pattern.
  • Avoid similar foreground and background colours.
  • Avoid busy background images behind important modules.
  • Use High error correction when adding a centre image.
  • Use 768 or 1024 pixels for strongly rounded or detailed designs.
  • Test the downloaded file and test again in its final artwork.
  • For print, test a sample at its intended physical size and viewing distance.

Troubleshooting

The QR code will not scan

  1. Increase error correction to High (30%).
  2. Restore a Normal or Wide quiet zone.
  3. Use dark dots and finder patterns on a plain light background.
  4. Remove or reduce the centre image.
  5. Remove extreme corner rounding.
  6. Increase the output to 768 or 1024 pixels.
  7. Test with another scanner.

A pasted colour is not accepted

Use the complete #RRGGBB format, for example #ff6600. Three-character values, colour names, and RGB functions are not accepted.

A pasted Style code will not load

Make sure the whole code was copied, with no characters missing. A Style code is not the same as the text or website address encoded by the QR code.

An image is rejected

Use a PNG or JPEG no larger than 1.5 MB. If necessary, resize or compress it and try again.

My settings disappeared

Most design options belong to the current browser-tab session. Use Copy style code when you need to keep a design permanently or move it to another device.