How to Put a QR Code on Your Website

The fastest way: copy the embed snippet

Here is the whole trick, and it takes about two minutes. Open the tool, pick the Website link tab, and paste in the address you want people to land on. The code draws itself as you type. When it looks right, click the button that says Copy code for your website. That copies a small block of HTML to your clipboard. Paste it into any HTML block, embed block, or custom code area on your site, and you are done.

What you just pasted is a link-wrapped image with the QR pattern baked in as data. There is no separate image file sitting on a server somewhere. The picture lives inside the snippet itself. That matters more than it sounds like it should, because it means there is nothing to upload, nothing to name, nothing to keep track of, and nothing that can turn into a broken-image icon six months from now when a folder gets reorganized.

If you have never made one before, start on the tool and build the code first. The snippet button shows up once your code is ready.

Snippet vs image file

There are two honest ways to get a QR code onto a page. Pick based on how your site handles code.

Method A: paste the snippet (recommended). This is the one above. Nothing to host, because the image is inside the code as data. Best for any platform that lets you drop in raw HTML.

Method B: download the image and upload it. Build the code, then download it. You get a choice of formats. Use the SVG for the web, because it stays crisp at any size and never turns to mush when someone views your page on a high-resolution screen. Use PNG only if your platform refuses to accept SVG uploads (some older page builders do). Then place the file with a normal image block or an <img> tag.

Short version: paste the snippet if you can, upload the SVG if you would rather have a file to manage. Both point at the exact same destination.

Add it in Squarespace, Wix, Webflow, or WordPress

Every builder calls its blocks something slightly different, so here is the plain-English version for the four I get asked about most.

• Squarespace. For the snippet, add a Code block and paste it in. For a file, add an Image block and upload the SVG or PNG.
• Wix. For the snippet, use Embed, then Embed HTML (sometimes shown as a custom code widget), and paste. For a file, add an image the normal way.
• Webflow. For the snippet, drop in an Embed element and paste. For a file, use an Image element.
• WordPress. For the snippet, add a Custom HTML block and paste. For a file, use an Image block.

That is the whole list. If your builder has anything called "embed," "custom code," or "HTML," the snippet goes there. If it does not, upload the image instead. Do not overthink it.

Make it work on phones (tap-or-scan)

Here is the part people forget, and it quietly kills a lot of QR codes on websites. Someone visiting your page on their phone cannot scan the code, because the code is on the same screen they are holding. They would need a second phone. Nobody has a second phone out.

So the code needs to be tappable as well as scannable. Good news: the snippet already handles this. It is wrapped in a link, so a tap on a phone goes exactly where a scan would send a desktop visitor. Same destination, both ways.

If you went with Method B and dropped in a plain image, wrap that image in a link to the same URL yourself, or your phone visitors will just poke at a picture and nothing will happen. In most builders that is as simple as selecting the image and adding a link.

On size: 150 to 200 pixels wide on screen is plenty for a desktop visitor to scan comfortably. Do not shrink it below about 120 pixels, or phones trying to read it from another screen will struggle. Website size and print size are different problems; if you are also printing the code, I put the real numbers in the QR print size guide. And if a code refuses to scan no matter what, the why won't my QR code scan guide walks through the usual culprits.

Why a static code will not break your page later

This is the reason I built the tool the way I did. The code is static, which means the destination is written straight into the black and white pattern. Nothing sits in the middle. There is no redirect server, no account, no dashboard that has to stay online for your code to keep working.

So even if this tool vanished tomorrow, the snippet you pasted keeps pointing exactly where you set it. The same is true of the SVG or PNG you downloaded. It is yours now, and it does not phone home. That is the opposite of a dynamic QR code, the kind that routes every scan through a vendor's server and goes dead the day the subscription lapses. If you want the full breakdown of why that happens, I wrote it up in static vs dynamic, and why static never expires.

FAQ