QR Makeris a lightweight web application for designing custom QR codes. It lets you change pixel shapes, corner marker styles, colors, and add logos or icons.
It runs entirely in your web browser. There are no databases, accounts, or trackers.
For developers, the project includes a companion API to generate custom QR codes on the fly. For desktop and mobile integration, it features a native Apple Shortcut to capture data straight from your system sharing utilities.
View the website for all features and integrations: Open QR Maker website
QR Maker offers styling and format choices for both basic and advanced designs:
The basics:
- URL: Share websites and links.
- Text: Encode notes, codes, or instructions.
- WiFi: Share Wi-Fi credentials (network name, password, and security type) so guests can scan to connect.
- Contact: Create vCards with your name, phone number, email, and company.
And more:
- Email: Pre-fill the recipient, subject line, and body text.
- Phone: Let users call you with a single scan.
- Location: Share map coordinates (with built-in location auto-detection).
- SMS: Pre-fill a recipient phone number and message.
- Event: Generate calendar events with times, locations, and descriptions.
- Pixel Shapes: Pick from Square, Rounded, Dot, Horizontal Pills, Vertical Capsules, or Connected lines.
- Corner Markers: Choose custom frames and inner eyes (Rounded, Square, Circle, Leaf, or Beveled).
- Frame & Spacing: Adjust the margins and the outer background corner radius using simple sliders.
- Colors & Gradients: Pick colors or use pre-made swatches. Supports solid backdrops or full transparency.
- Icon Library & Custom Emojis: Choose from pre-loaded icons (Link, Globe, Wifi, Contact, Email, Phone, GitHub, LinkedIn, Instagram, YouTube, Patreon, Discord, Pinterest) or input any custom emoji.
- Custom Logos: Drag and drop your own PNG or JPG logo file directly into the center.
- Card Backings: Adjust the size of the icon and place a square, rounded, or circular backing card behind it to clear out overlapping QR modules.
- File Formats: Download your QR code as a vector-based SVG (ideal for print layouts) or as a PNG (available in 512px, 1024px, and 2048px widths).
- One-Click Share Links: Create a shareable URL that saves your design settings so others can open and edit it instantly.
QR Maker integrates deeply with your desktop or mobile environments for faster workflows:
Skip copying and pasting entirely. Use this Apple Shortcut to instantly turn any highlighted text, link, or phone number into a customized QR code directly from your Mac's right-click Quick Actions menu or your iPhone/iPad's native Share Sheet.
Install QR Maker directly to your system hard drive to design, configure, and download custom QR codes completely offline:
- macOS (Safari): Open the website, click File in the top menu bar, and choose Add to Dock....
- iOS / iPadOS (Safari): Tap the standard Share button and select Add to Home Screen.
- Chrome / Edge / Firefox: Click the installation indicator icon in the address URL bar to add the app directly to your desktop workspace or device app drawer.
- Automatic Error Correction: Putting a logo or icon in the center blocks some of the QR data. QR Maker automatically bumps up the Error Correction Level when you add a logo. This adds extra redundancy so the scanner can read the code even with the center blocked.
- Watch the Size: Keep logos or icons under 20% of the overall QR code size for the most reliable scanning.
- The share link packs your text and design settings into the URL. Avoid encoding massive blocks of text or files when using share links, as browsers limit how long a URL can be.
For an interactive experience, please visit the hosted Developer API Documentation. It features:
- An API Playground to test requests with live results
- Direct downloads for Postman & Bruno Collections
- Auto-generated Code Examples (JavaScript, Python, curl, etc.)
- Self-service API Key Registration
The project's API allows developers to request custom QR codes programmatically using simple web requests.
| Code examples and Downloads | Postman & Bruno collection examples |
|---|---|
 |
 |
QR Maker provides two endpoints depending on your integration needs:
Recommended for simple HTML <img> tag embeds.
GET https://qrmaker.ryanmarch.me/api/qrRecommended for server-side proxies, custom scripts, and high-volume integrations.
GET https://qrmaker.ryanmarch.me/api/plusFor the secure /api/plus endpoint, requests must include the API Key in the Authorization header using the Bearer scheme:
Authorization: Bearer YOUR_API_KEY
You may obtain a free API key by visiting the Developer API Documentation page and clicking the "Generate API Key" button.
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
content |
String | Yes | — | The text or URL to encode in the QR code (must be URL-encoded). |
format |
String | No | png |
The response format: png (binary file), svg (markup text), or base64 (JSON object). |
size |
Number | No | 1024 |
Width and height in pixels (for png and base64). Range: 64 to 4096. |
fgColor |
String | No | 000000 |
Hex color code for the pixels (e.g. ff0000). Do not include the #. |
bgColor |
String | No | ffffff |
Hex color code for the background (ignored if transparent=true). Do not include the #. |
transparent |
Boolean | No | false |
Set to true (or 1) to make the background transparent. |
margin |
Number | No | 2 |
Number of quiet-zone border modules around the QR code. Range: 0 to 10. |
ecl |
String | No | M |
Error Correction Level: L (Low), M (Medium), Q (Quartile), H (High). |
cornerRadius |
Number | No | 0 |
Background corner radius percentage. Range: 0 to 100. |
cornerStyle |
String | No | square |
Corner style: square, rounded, circle, leaf, beveled. |
icon |
String | No | none |
Predefined center icon: link, globe, text, wifi, contact, email, phone, map-pin, sms, event, github, linkedin, instagram, facebook, whatsapp, youtube, patreon, discord, pinterest. Also supports arbitrary URL-encoded emojis (e.g. icon=%F0%9F%9A%80 for 🚀). |
iconSize |
Number | No | 20 |
Percentage of the QR code area for the icon. Range: 10 to 30. |
iconColor |
String | No | — | Hex color code for the icon (defaults to fgColor). Do not include the #. |
iconClear |
Boolean | No | true |
Set to false (or 0) to disable clearing the QR modules behind the icon. |
iconBg |
String | No | rounded |
Shape of the backing card behind the icon: rounded, circle, square, or none. |
Returns a raw PNG image file.
- Content-Type:
image/png - Direct embedding:
You can embed the API URL directly in a standard
<img>tag. Unauthenticated requests are allowed (subject to rate limiting):
<img src="https://qrmaker.ryanmarch.me/api/qr?content=Hello&size=512&fgColor=ffffff&bgColor=1B5256" alt="QR Code for Hello" />Returns valid SVG XML markup.
- Content-Type:
image/svg+xml; charset=utf-8
Returns a JSON object wrapping a Data URL.
- Content-Type:
application/json - Payload:
{
"data": "data:image/png;base64,iVBORw0KGgoAAA..."
}
Note
Successful API requests return cache-control headers (Cache-Control: public, max-age=31536000, immutable) so browsers and edge networks cache images indefinitely.
QR Maker is built directly on standard web technologies to keep page load times under a second.
- QR Engine: The app uses an inlined version of Kazuhiko Arase's QR Code generator library (MIT License) to compile the raw text data into a grid.
- HTML5 Canvas: Custom drawing logic in
js/qr-core.jsreads the grid and draws custom pixel shapes and finder patterns to render the final PNG images. - Vector SVG Generator: Outputs clean, editable XML SVG strings directly.
- Offline Service Worker: Using
sw.js, the app caches its code, styles, and web fonts to launch and operate offline.
- Cloudinary Upload: To support one-click share links that preserve custom designs, uploaded custom logos are stored in a Cloudinary image folder. The generated URL is then included in the shareable link. Uploaded images are subject to deletion at any time, so make sure to download any QR codes with images you want to keep.
- Local QR generation works fully offline without uploading.
MIT License. Designed and maintained by Ryan March.