Projects › Everyday tools › QR code generator

Free QR code generator that never expires, and how to make your own

Type a link, your Wi-Fi details or a contact card and your code appears as you type. Download it as a PNG or SVG, or print it. There's no sign-up and no tracking, and the code is made in your browser, so it keeps working for ever. Then make your own with a free AI assistant.

Easy About 40 minutes Free · no sign-up Nothing leaves your device

Colours
Border 4
Style
Error correction

Higher error correction still scans if part of the code gets scuffed or covered, but makes it denser. M suits most things; choose H for outdoor signs or stickers. These codes are static: nothing is stored or tracked, and they work for as long as the link inside them does.

Watch it come together, start to finish
Static or dynamic?

Will my QR code stop working?

Not this one. There are two kinds of QR code:

  • Static codes hold your link or text inside the pattern itself. Your phone reads it straight off the code, so it works for ever and nobody can switch it off. That's what this page makes.
  • Dynamic codes hold a short link to the maker's website, which then sends people on to yours. That lets you change where it goes later and count scans. But if the free trial ends or you stop paying, the code stops working, even on things you've already printed.

If you need to change the destination later, point a static code at a page you control, like your own website, and change that page instead.

What you'll build

Your own QR code maker, on your computer

You'll describe the QR code maker to a free AI assistant, paste what it writes into a file, and open it in your browser. Then you'll add Wi-Fi and contact cards, choose colours, and save codes ready to print.

  • A box where you type a link and the code appears as you type
  • Wi-Fi codes that let guests join without typing the password
  • Email, phone, text message and contact card codes
  • Your own colours, with a warning if they're too faint to scan
  • PNG downloads for sharing and SVG downloads for crisp printing
  • A print button for a tidy card with a label underneath

Good for: small businesses, clubs, teachers, anyone planning a wedding or party, and anyone who wants a code that won't stop working when a free trial ends.

Before you start

What you need

An AI chat assistantClaude, ChatGPT or Gemini. The free version is fine.
A plain text editorNotepad (Windows) or TextEdit (Mac; choose Format then Make Plain Text first).
A web browser and a phoneAny browser will do. Use your phone's camera to test the codes as you go.
First time? Read How to save and open an HTML file. It takes two minutes.
Step by step

Build it in five steps

Step 1 gives you a simple version that works, and each step after it adds more. The demo at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

Making the QR pattern from scratch is fiddly maths, and AI assistants often get a tiny detail wrong, which gives a code that looks fine but won't scan. So the prompts ask the AI to use qrcode-generator, a small, free library that's been making reliable codes since 2009. It loads from a free CDN, so you still only have one file to save and nothing to install. The page needs the internet once when it opens; after that, everything happens on your computer.

  1. Ask for the QR code maker

    Copy this prompt into your AI assistant:

    Copy this prompt
    I don't know how to code. Please make me a QR code maker that runs in a web browser.
    
    Requirements:
    - ONE single HTML file (HTML, CSS and JavaScript together). I will save it and double-click it.
    - Use the qrcode-generator library from this address, and no other libraries:
      https://cdn.jsdelivr.net/npm/[email protected]/qrcode.js
      Create codes with qrcode(0, 'M') so it picks the size itself. Before adding text, set qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'] so accents and emoji work, and add the text in 'Byte' mode.
    - A big text box for a link or any text. The code updates live as I type, with no button to press.
    - Draw the code on a canvas yourself: black squares on white, with a white border 4 squares wide all round. Keep it sharp, not blurry.
    - A "Download PNG" button that saves the code as qr-code.png at 1024 pixels wide.
    - If the text is too long for a QR code, show a friendly message instead of crashing.
    - A clean, simple design that fits a phone screen, with big buttons.
    
    Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

    Copy the code, paste it into your text editor, and save it as qr-maker.html. Double-click it, type a link, and point your phone camera at the screen. It should offer to open the link.

  2. Add Wi-Fi, email, phone and contact cards

    Each of these is just text written in a special way that phones recognise. The prompt spells out the exact formats, so the AI doesn't have to guess.

    Copy this prompt
    That works, thank you. Please add tabs along the top: "Link or text", "Wi-Fi", "Email", "Phone" and "Contact card". Each tab shows its own boxes and the code still updates as I type.
    - Wi-Fi: network name, password (with a "show password" tick box), and security (WPA/WPA2/WPA3, WEP, or no password). Make the text WIFI:T:WPA;S:name;P:password;; (use T:nopass and leave out P: for no password). Put a backslash before any \ ; , : or " in the name or password.
    - Email: address, subject and message. Make the text mailto:address?subject=...&body=... with the subject and message passed through encodeURIComponent.
    - Phone: a number, and a choice of Call or Text message. Call makes tel:+447700900123. Text makes SMSTO:+447700900123:message. Remove spaces from the number.
    - Contact card: first name, last name, company, mobile, email and website. Make a vCard 3.0 with BEGIN:VCARD, VERSION:3.0, N:Last;First;;;, FN:First Last, then ORG, TEL;TYPE=CELL, EMAIL and URL lines for anything filled in, then END:VCARD. Put a line break (\r\n) between lines.
    - If I type a link without https:// at the front, add it for me.
    
    Send me the complete updated file.
    Always ask for the complete file. Replace everything in qr-maker.html, save, and refresh the tab (F5 or Cmd+R).
  3. Choose colours, size and strength

    Copy this prompt
    Please add a small "Options" area:
    - Two colour pickers, for the squares and the background, with a "Black on white" button to reset them.
    - Work out the contrast ratio between the two colours (the WCAG formula). If it's under 4, or the squares are lighter than the background, show a gentle warning that some phones may not scan it.
    - A slider for the white border, from 0 to 8 squares, starting at 4. Warn me if I go below 2.
    - A choice of error correction: L, M, Q or H, starting at M, with a one-line note that higher levels survive scratches but make the code denser.
    - A choice of download size: 512, 1024 or 2048 pixels.
    
    Send me the complete updated file.
  4. Save an SVG and print a card

    A PNG is fine for sharing online. For printing, an SVG stays perfectly sharp at any size, from a business card to a poster.

    Copy this prompt
    Please add two more buttons next to Download PNG:
    - "Download SVG": build an SVG of the code myself, one dark square path per module, with the background colour, my border and shape-rendering="crispEdges". Save it as qr-code.svg.
    - "Print": print just the code in the middle of the page, about 9 cm wide, with nothing else from the page showing. For Wi-Fi codes, add the network name and the password underneath in large text, with "Point your phone camera at the code to join".
    
    Send me the complete updated file.
  5. Test every code before you print it

    Before you print a hundred menus, check each kind of code with at least two phones if you can, one iPhone and one Android. Scan it from the screen, then print one copy and scan that from about arm's length. Check that the Wi-Fi code really joins the network and that the link goes to the right page.

    Copy this prompt
    Please show the exact text that's inside the code in a small grey box under it, so I can check it's right before I print. Add a "Copy" button next to it.
    
    Send me the complete updated file.
ADVERTISEMENT · IN-ARTICLE
If it goes wrong

Quick fixes

My phone won't scan it

Check these in order. Make the squares dark and the background light; light-on-dark codes confuse most phones. Keep a white border at least 4 squares wide. Make the code bigger, at least 2 cm across for every 25 cm of scanning distance. Hold the phone steady and not too close. On Android, if the camera ignores it, try Google Lens. If it still won't scan, shorten what's inside: a shorter link makes a simpler code.

The page is blank, or it says qrcode is not defined

The library didn't load. Check you're online, then refresh. If it still fails, tell the AI: "The page says qrcode is not defined. Please check the script tag uses https://cdn.jsdelivr.net/npm/[email protected]/qrcode.js and loads before your own code." Ask for the complete file.

The Wi-Fi code scans but won't join

The name and password are case sensitive, so check every capital letter. Make sure the security type matches your router (almost all homes use WPA). If your password has a ; : , or " in it, check the AI added a backslash before it.

The downloaded code looks blurry

Tell the AI: "Please draw each square at a whole number of pixels and set imageSmoothingEnabled to false." For printing, use the SVG instead.

Accents or emoji come out as gibberish

The UTF-8 setting is missing. Tell the AI: "Please set qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'] before adding the text." Ask for the complete file.

The code is very dense and hard to scan

There's too much inside it. Use a shorter link, leave out optional contact details, or drop the error correction to L or M.

Make it your own

Twist it into something else

Once you can make one code, you can make all sorts. Change the prompts to make:

A Wi-Fi card for guests

a printable card with your network name, the code and a friendly "Welcome, join our Wi-Fi" for the fridge or a holiday let

Wedding or event table cards

a sheet of cards with the table name and a code that opens your wedding website or photo upload page

A restaurant menu code

a table stand with your logo colours, the café name and a code that opens your online menu

A business card with your contact details

a print-ready card layout where the code saves your name, number and email straight to someone's phone

A batch maker from a spreadsheet

paste a column of links from a spreadsheet and download a code for each one, named to match, in one zip file

A treasure hunt around the house

a sheet of numbered codes that each show a clue to where the next one is hidden, ending at the prize

Why build it yourself?

Codes that are yours for good

Many QR code websites hand you a "dynamic" code that runs through their servers, then switch it off when the free trial ends, often after it's already on your menus or wedding invitations. A code you make yourself has no middleman, no sign-up and no tracking. It's also one of the quickest builds on this site, and you'll find a use for it every few weeks: party invitations, a Wi-Fi card, a link on a poster, a contact code on your stall.

Keep going

What to build next