Make UPI, WiFi and vCard QR Codes with a Logo: EpiFive QR Code Generator

EpiFive QR Code Generator is a free, open-source QR code generator that runs entirely in your browser. You pick a type, such as a website link, a UPI payment, a WiFi network or a contact card, style the code with colors, shapes, a logo and a call-to-action frame, and download it as PNG, SVG or a print-ready PDF after a built-in scan test confirms it reads. Nothing is uploaded, there is no sign-up, and the codes never expire because they are static.

EpiFive QR Code Generator is an EpiFive project. The source is at github.com/epifive/qr-code-generator, a live copy runs at qr-code-generator-demo.pages.dev, and the project is listed with other EpiFive repositories on the open-source projects page.

What EpiFive QR Code Generator is and who it is for

EpiFive QR Code Generator is a static Next.js web app: a set of files that any web host can serve, with no backend and no database. Encoding, styling, the scan test and every export happen in the browser, and saved designs live in the browser's localStorage.

It suits:

• Shops, cafes and restaurants that need a UPI payment QR for the counter, a menu link for table tents or a WiFi code for guests.
• Small offices that print WiFi codes for visitors and contact cards for staff.
• Marketers and designers who want branded codes in vector SVG for print without a monthly plan.
• Developers who want a QR generator they can read, change and host on their own domain.

Static vs dynamic QR codes in one minute

A static QR code stores its content in the pattern: the full URL, the WiFi name and password, or the UPI ID. A phone decodes it without contacting anyone, so it works as long as the content is still valid. It cannot be edited after printing.

A dynamic QR code stores a short link to a server. The server redirects to the real destination, which you can change later, and it can count scans. The price is a dependency: if the server, the account or the domain goes away, every printed code stops working.

Why some QR codes stop working (and why EpiFive QR Code Generator's do not)

Some hosted generators create dynamic codes by default, routed through their own short links. If the trial or the subscription behind those links ends, the codes can stop resolving, even though they look identical to static ones on paper. Before you print anything from a hosted service, read its terms for what happens to codes when an account lapses.

EpiFive QR Code Generator only makes static codes, so nothing sits between the code and its content. A paid Pro edition adds self-hosted dynamic codes with scan analytics; this guide covers the free MIT edition only.

Make your first QR code

Open EpiFive QR Code Generator and pick a QR code type. The preview updates as you type, and each form validates its input before it builds the code.

Pick a type: URL, UPI, WiFi, vCard, WhatsApp, email, SMS, text, location

Type	What the code contains
URL	A website or link, opened in the phone's browser
Text	Plain text shown on the phone
UPI payment	A upi://pay link with payee, name, optional amount and note
WiFi	Network name, password, security type and a hidden-network flag
vCard	A contact card (vCard 3.0) with name, company, phone, email and address
Email	A mailto: link with recipient, subject and body (RFC 6068)
SMS	A phone number and a pre-filled message
WhatsApp	A https://wa.me/ click-to-chat link with an optional pre-filled message
Location	A Google Maps link or a geo: URI with latitude and longitude (RFC 5870)

For vCard, the RFC 2426 profile for version 3.0 requires the FN, N and VERSION properties between BEGIN:VCARD and END:VCARD. EpiFive QR Code Generator builds N and FN from the first and last name you enter (or the company name), so fill in both names for a complete card.

UPI payment QR: payee, amount and note explained

UPI QR codes carry a upi://pay link defined in NPCI's UPI linking specification. EpiFive QR Code Generator fills four fields from the form and adds the currency:

Parameter	EpiFive QR Code Generator field	Meaning in the specification
pa	UPI ID (VPA)	Payee address, mandatory
pn	Payee name	Payee name, mandatory
am	Amount (optional)	Transaction amount in decimal format
tn	Note (optional)	A short description of the transaction
cu	Added automatically	Currency code; INR is the only supported value

A finished link looks like this:

upi://pay?pa=contoso@okbank&pn=Contoso%20Store&am=250.00&cu=INR&tn=Order%201024

Leave Amount empty for a counter QR. The specification describes static QR codes for small merchants as carrying only the payee address and name, with the customer entering the amount after scanning. Fill in an amount only for a one-off payment, such as a printed invoice.

Before you print, scan the code with your own UPI app and make a small test payment to confirm the name and account. Money goes straight to the bank account linked to the UPI ID; EpiFive QR Code Generator never sees it. For counter safety, read how UPI QR code scams work.

WiFi QR: security types and hidden networks

Enter the Network name (SSID) and Password, choose the Security, and turn on Hidden network if the router does not broadcast its name. EpiFive QR Code Generator builds the widely used WIFI: format documented in the ZXing project's barcode contents guide:

WIFI:T:WPA;S:Contoso Guest;P:correct-horse-battery;;

• WPA / WPA2 / WPA3 writes T:WPA. The Wi-Fi Alliance's WPA3 specification also uses the value WPA for password-protected networks, so one code covers WPA2 and WPA3 routers. EpiFive QR Code Generator requires at least 8 characters for a WPA password.
• WEP (old routers) writes T:WEP. The WPA3 specification does not define WEP, and some phones may not join a WEP network from a code.
• None (open network) writes T:nopass and no password.

Special characters (backslash, semicolon, comma, colon and double quote) in the name or password are escaped with a backslash, as the ZXing guide describes. If a phone fails to join, test a simpler guest password first.

Design it

The style panel changes appearance only; the content and the scan test stay the same.

Colors, gradients and contrast

Set the code and background colors, a transparent background, a linear or radial gradient, and separate colors for the three corner squares. Keep the code darker than the background. EpiFive QR Code Generator warns when contrast is low, when the code is light on a dark background (some scanner apps do not support inverted codes) and when a transparent background is on, because the code then depends on the surface you print it on.

Dot and eye shapes, style presets

Choose from 5 dot styles (square, rounded, dots, classy and fluid), 4 eye frame shapes and 4 eye center shapes. The 7 presets (Classic, Indigo dots, Ocean, Sunset, Forest, Midnight and Soft mono) set colors and shapes in one click as a starting point.

Adding your logo safely (error correction H)

Upload a PNG, JPG, SVG or WebP logo, or pick a built-in icon, and set the Logo size. Keep Clear the dots behind the logo on so the logo sits on a clean background.

A logo hides part of the code, and the scanner rebuilds the hidden part from error correction data. DENSO WAVE, which invented the QR code, lists four levels: L restores about 7% of the codewords, M about 15%, Q about 25% and H about 30%. EpiFive QR Code Generator raises the level to H when you add a logo and warns when the logo covers more than the level can recover. Keep logos small; bigger is not better.

Frames and call-to-action text

Frames add a label such as "SCAN TO PAY" or "FREE WIFI" around the code, as a banner, top banner, speech bubble or outline, with its own colors. A short instruction tells people what they get before they scan.

Check, download and print

The built-in scan test and warnings

Every design is decoded in the browser with ZXing-C++ compiled to WebAssembly. A passed test means the exported image decodes to exactly the content you entered. Warnings cover low contrast, inverted colors, a quiet zone under 2 modules and an oversized logo. DENSO WAVE specifies a quiet zone of four modules on all sides, so leave the Quiet zone (margin) at its default of 4 for print.

The scan test does not replace a real phone. Before a print run, scan the printed proof with two or three phones at the distance people will use.

PNG vs SVG vs PDF, and the right print size

• PNG from 256 to 4,096 pixels wide, for websites, documents and social posts.
• SVG, a vector file that stays sharp at any size, for designers and professional printers.
• PDF on A4, US Letter, A5, A6 or a page that fits the code, at a printed width you choose in centimeters.

No single minimum size suits every code, because the size a phone can read depends on how much data the code holds, the module size and the scanning distance. EpiFive QR Code Generator suggests at least 2 cm wide and about one tenth of the scanning distance as a starting point. Shorter content means fewer, larger modules, so a short URL scans more reliably than a long one at the same size.

Sticker sheets for counters and tables

With A4, Letter, A5 or A6 selected, turn on Sticker sheet and EpiFive QR Code Generator fills the page with as many copies as fit at your chosen width. Print on sticker paper for table numbers, product labels or several counters at once.

Save and reuse designs

Saved designs and JSON export

Save a design to keep its content and style. The saved list lets you open, rename, duplicate and delete designs, and export or import all of them as a JSON file. Like any localStorage data, designs belong to one browser on one device: another browser or a private window starts empty, and clearing site data removes them. Export the JSON file whenever you save something you will need again.

Self-host the free version

Install with npm

You need Node.js 20.9 or newer and Git.

git clone https://github.com/epifive/qr-code-generator.git
cd qr-code-generator
npm install
npm run dev        # http://localhost:3000

Run the tests and build the static site before you deploy:

npm test
npm run build      # static site in out/

Set NEXT_PUBLIC_SITE_URL to your own address before the build so canonical tags, the sitemap and the social image point at your domain.

Deploy to Cloudflare Pages, Vercel or any static host

• Cloudflare Pages: connect the repository with build command npm run build and output directory out, or deploy from your machine with npx wrangler pages deploy out --project-name my-qr-code-generator.
• Vercel or Netlify: import the repository; the output directory is out.
• Nginx, Apache, Amazon S3 or GitHub Pages: upload the contents of out/. Serve .wasm files with the application/wasm content type, or the scan test cannot load its decoder.

Troubleshooting

• A phone will not scan the code: check the warnings first. Then raise the contrast, set the quiet zone to 4, shrink the logo or shorten the content.
• The scan test fails after you add a logo: reduce the logo size or turn on Clear the dots behind the logo; the error correction level should already be H.
• A WiFi code opens but the phone cannot join: check the security type and password, including capital letters. Open networks must use None.
• The scan test never loads on your own server: the web server is not serving .wasm files as application/wasm.
• Saved designs are missing: you are in another browser, a private window or at a different address. Import your JSON export.

Checklist

1. Content type chosen and the form shows no validation errors.
2. UPI codes tested with a small payment; WiFi codes tested on a phone.
3. Dark code on a light background, quiet zone of 4 modules, small logo.
4. Scan test passed in EpiFive QR Code Generator and on two or three real phones from the intended distance.
5. SVG or PDF for print, PNG for screens; printed size suits the scanning distance.
6. Designs saved and exported as JSON.

References

• NPCI, UPI Linking Specifications version 1.6 (copy): https://www.labnol.org/files/linking.pdf
• ZXing project, Barcode Contents (WiFi and other formats): https://github.com/zxing/zxing/wiki/Barcode-Contents
• Wi-Fi Alliance, WPA3 Specification version 3.5 (WIFI URI format): https://www.wi-fi.org/system/files/WPA3%20Specification%20v3.5.pdf
• IETF RFC 2426, vCard MIME Directory Profile (version 3.0): https://www.rfc-editor.org/rfc/rfc2426.html
• IETF RFC 6068, The mailto URI Scheme: https://www.rfc-editor.org/rfc/rfc6068.html
• IETF RFC 5870, A Uniform Resource Identifier for Geographic Locations (geo URI): https://www.rfc-editor.org/rfc/rfc5870.html
• DENSO WAVE, QR Code standardization and error correction levels: https://www.qrcode.com/en/about/standards.html
• DENSO WAVE, Error correction feature: https://www.qrcode.com/en/about/error_correction.html
• DENSO WAVE, How to make a QR Code (quiet zone): https://www.qrcode.com/en/howto/code.html
• EpiFive QR Code Generator source code and README: https://github.com/epifive/qr-code-generator

---

This guide was researched and drafted with AI assistance and checked against the vendor documentation listed in its References. Read the maintained version and related guides on EpiFive.