Why I made this
Most online QR generators either charge money, force you to sign up, or create QR codes that only work as long as you stay on their platform. Some even make the codes redirect through their own servers, which means your QR isn’t really permanent. I wanted a tool that cuts all of that out: no logins, no hidden costs, no expiry dates. Just simple, permanent QR codes that you can generate, preview, and download instantly.
Clean, branded, and ready to share—without sending data to a server or wrestling with complicated software. This tool lets you type titles and URLs, pick colours that match your brand, optionally place a centred logo, see instant previews, and download everything in one ZIP. It’s designed to be fast, private, and easy to embed on any site.
What the page does
You add rows with a Title and a URL.
You choose foreground and background colours from a small, tidy palette.
(Optional) You upload a logo that will be drawn in the centre of every QR code.
You see live previews.
You click “Save All as ZIP” to download each QR as a PNG named after its title.
Privacy by design
All generation happens in your browser. Your text and images are not uploaded to any server. If the page is hosted on your own site, nothing leaves your device during QR creation or ZIP packaging.
How it works technically
• QR generation: The page includes a small JavaScript library (qrcode.js). When you enter a URL, the library encodes it and draws a QR onto an HTML canvas element. This is pure client-side code; no external API calls are needed to produce a QR.
• Rendering and previews: Each QR preview is rendered to a canvas at a fixed size. To keep the interface smooth, the page listens for input changes (typing, colour selection, adding/removing rows) and uses a short debounce so it re-renders only after you pause for a moment. This prevents flicker and avoids overlapping renders.
• Logo overlay: If you choose a logo, the image is loaded in the browser and then drawn onto the centre of each QR canvas at about 22% of the QR’s width. The code waits for both the QR canvas and the logo image to be ready before drawing to ensure consistency.
• ZIP download: When you click “Save All as ZIP,” each canvas is converted to a PNG data URL, decoded, and added to a ZIP archive in memory. File names are created from the titles you entered (sanitised to be file-system friendly). The ZIP is then offered as a download—again, all in the browser.
• Layout: The previews use a responsive CSS grid with a firm minimum card width so cards wrap neatly to new lines instead of squishing together. The preview “cards” remain white for readability while the overall widget background is transparent to blend into any site.
• Performance details: The page builds previews off-DOM (using a document fragment) and swaps them into the grid in one step. This reduces layout thrashing and avoids duplicate renders. A small render gate ensures only one render runs at a time.
What to know about colours and readability
QR codes rely on strong contrast. For best results, use a dark foreground and a light background. Very light foregrounds, very dark backgrounds, or extremely busy logos can reduce scan reliability. If you must use a logo, keep it simple, high-contrast, and avoid covering the finder patterns (the three big squares in the corners).
File format and sizing
Downloads are PNG images suitable for screens and typical print needs. If you plan large-format printing, generate at a higher pixel size (the code can be adjusted to render larger canvases) and test with your intended print process. Keep in mind that adding a logo effectively reduces quiet space; print at an appropriate size so scanners can lock on easily.
Reliability and offline use
Once the page loads, QR generation and ZIP creation work entirely offline. If you prefer zero third-party dependencies, the qrcode and zip libraries can be hosted from your own server or inlined into the page.
Limitations
This tool does not shorten URLs, track scans, or validate destination pages YET. If you need shorter codes or analytics, use a short-link service before generating your QR. Also, while the tool prevents overlapping renders, extremely large batches can still take noticeable time on low-powered devices. My aim was to create a simple UI for the tool, so we thought it was best to leave it out for now to maintain a 'simple' solution.
Maintenance notes
If you embed this on different websites, keep the script references up to date, avoid conflicting CSS that could affect the grid or inputs, and confirm that any content security policies allow the page to create canvases and trigger downloads.
Closing thought
The goal is a clean, dependable, and private way to batch-create on-brand QR codes in seconds. Type, preview, download—done.