How to add a QR code to Squarespace

Upload the PNG to an Image block anywhere on the page — no plugin or code injection needed. For codes that update with the page, drop an img tag pointing at a keyless QR API into a Markdown or Code block. Upload at twice display size so compression never softens modules.

The Image block route

Generate your code with the URL generator — or vCard for a contact page — and download the PNG.
In the Squarespace editor, add an Image block where you want the code and upload the file.
Add alt text describing the destination, and resist the urge to style it — borders and rounded corners eat into the quiet zone.

Upload at least 2× the displayed size. Squarespace generates resized variants of every uploaded image and serves whichever fits the container, and a QR code has no pixels to spare. A code displayed at 200 px should be uploaded at 400 px or more so the downscaled variant keeps clean module edges. If a code that scans as a file stops scanning on the live page, resampling is the first suspect — the mechanics are covered in image compression damage.

PNG, not JPEG: JPEG's compression smears the sharp black-white transitions a decoder depends on.

The Code block route (API-backed image)

Where you would rather reference the code than manage an image file — or you maintain many pages and want codes defined in text — add a Markdown or Code block with a plain img tag pointing at the keyless API:

<img src="https://useqr.app/api/v1/qr?data=https%3A%2F%2Fexample.com%2Fbook&size=400"
     width="200" height="200" alt="QR code linking to the booking page">

No account or key; the URL is the whole integration. This is plain HTML, not script, so it works in a standard Code block. Change the data parameter and the code changes with it. General embedding patterns (data URIs, inline SVG) are in embedding a QR code in HTML.

Site-wide code injection (Settings → Advanced) is for scripts and is not needed for this — an image belongs in the page, not the header.

Does your Squarespace site need a QR code at all?

Be honest about direction. A QR code's job is moving people from the physical world to a URL — so the natural Squarespace pairing is print materials that point at your site: business cards, flyers, signage for the studio or venue the site represents. On the site itself, the strong cases are narrower:

a vCard code on the contact page, so a visitor on a laptop can pull your details into their phone in one scan,
a code in content that gets printed (price lists, PDFs, event sheets),
a WiFi code on a venue information page guests may print.

A code that merely links to another page of the same site is decoration — a link does that job better for everyone on screen.

Whatever you place, check the published page, not the editor preview: scan it from a phone at realistic distance and run the live image through the validator.

FAQ

Can I add a QR code to Squarespace without a plugin?

Yes. Squarespace has no QR plugin requirement at all — an Image block with an uploaded PNG works on every plan, and a Code or Markdown block with an img tag covers dynamic cases.

Why does my QR code look blurry on Squarespace?

Squarespace serves resized variants of uploaded images. If the original is close to the display size, the resample softens module edges. Upload at two times the largest displayed size or more and the served variant stays sharp.

Which block should I use for a QR code?

An Image block for a fixed code you generated and downloaded. A Markdown or Code block with an img tag when you want the code defined by a URL, generated on request by an API.

Should the QR code be PNG or JPEG on Squarespace?

PNG. JPEG compression blurs the hard edges between modules, which is exactly the detail a scanner needs. PNG is lossless and usually smaller for flat black-and-white artwork anyway.