Skip to main content

Creating QR Codes

Learn how to generate customized QR codes for any purpose.

Basic Creation​

Step 1: Enter Your Data​

  1. Navigate to the Create tab
  2. In the data input field, enter your content:
    • Plain text
    • URL (will auto-detect and add https://)
    • Email address
    • Phone number
    • Or use Data Templates for structured data

Step 2: Preview​

The QR code updates in real-time as you type. You'll see:

  • Live preview on the left (desktop) or top (mobile)
  • Data size indicator
  • Suggested error correction level
  • Encryption status (if enabled)

Step 3: Export​

Choose your export format:

  • PNG — Best for digital use, web, and most printing
  • JPG — Smaller file size, good for photos and web
  • SVG — Vector format, perfect for large-scale printing and design work
  • ASCII/Unicode — Text-based QR codes for terminals and emails

Click the corresponding button to download.

Export Options​

Image Export (PNG/JPG/SVG)​

PNG Export:

  • Default resolution: 800x800px (configurable)
  • Transparent or solid background
  • Best quality, lossless compression
  • Larger file size (~50-200KB)

JPG Export:

  • Adjustable quality (default: 90%)
  • Always solid background color
  • Smaller file size (~20-80KB)
  • Good for print and web

SVG Export:

  • Scalable to any size without quality loss
  • Smallest file size (~5-20KB)
  • Editable in design software (Adobe Illustrator, Inkscape, Figma)
  • Perfect for professional printing

Text Export (ASCII/Unicode)​

Export QR codes as text characters for use in:

  • Terminal applications
  • Email signatures
  • Plain text documents
  • Command-line tools

Formats available:

  • 7-bit ASCII — Basic characters, widest compatibility
  • 7-bit Inverted — Reversed polarity (# = background)
  • Compact Unicode — Uses ▀ ▄ █ blocks, 50% height

Additional Actions​

Copy to Clipboard​

Click the Copy button (📋) to copy the QR code as an image. You can then paste it directly into:

  • Email clients
  • Chat applications (Slack, Teams, Discord)
  • Document editors (Word, Google Docs)
  • Image editors (Photoshop, GIMP)

Browser Support:

  • ✅ Chrome 76+
  • ✅ Edge 79+
  • ✅ Firefox 90+
  • ✅ Safari 13.1+

Share​

Use the native share dialog to send the QR code:

  • Via email
  • To messaging apps
  • To other installed apps
  • To cloud storage

Note: Share feature requires browser support and may not be available on all devices.

Understanding the Preview​

Color Coding​

  • Green checkmark — QR code is valid and scannable
  • Amber warning — Data size is large, higher error correction recommended
  • Red error — Data too large for selected error correction level

Size Recommendations​

Data LengthRecommendedMaximum (with 'L')
0-50 charsError Correction: H~2,950 chars
51-150 charsError Correction: Q~1,850 chars
151-500 charsError Correction: M~1,270 chars
500+ charsError Correction: L~2,950 chars

Note: Encryption adds ~30-40% to data size.

Quick Customization​

Using Presets​

  1. Click the Preset dropdown
  2. Select a pre-configured style (Vercel, Supabase, VueJS, etc.)
  3. Customize further if needed
  4. Export your QR code

Popular presets:

  • Plain — Basic black on white
  • Vercel Light/Dark — Clean minimalist design
  • Supabase Green — Modern tech style with green accents
  • VueJS — Official Vue.js branding
  • Scottsdale — Custom Scottsdale Mint branding
  1. Expand Settings → Image Settings
  2. Click Upload Image
  3. Select your logo file (PNG, JPG, SVG)
  4. Adjust the image size slider (0-100%)
  5. Set the margin around the logo

Best practices:

  • Use square logos for best results
  • Keep logo size ≤40% for reliable scanning
  • Use high-contrast logos
  • Test scanning after adding logo

Error Correction Levels​

QR codes include built-in error correction. Higher levels allow the code to be scanned even if partially damaged or obscured.

LevelRecoveryBest For
L — Low7%Large data, clean environments
M — Medium15%General use, moderate damage
Q — High25%Logos in center, outdoor use
H — Highest30%Small codes, heavy damage

When to use each:

  • H: Adding logos, stickers, outdoor signage
  • Q: Printed materials, business cards
  • M: Digital displays, clean printing
  • L: Large datasets, optimal conditions only

Troubleshooting​

QR Code Won't Scan​

  1. Increase error correction level (Q or H)
  2. Reduce logo size or remove logo
  3. Increase QR code size (minimum 2cm x 2cm for print)
  4. Use higher contrast colors
  5. Ensure adequate white space around code

Export Button Not Working​

  1. Check browser popup blocker settings
  2. Try a different export format
  3. Use "Copy to Clipboard" as alternative
  4. Check browser console for errors (F12)

Data Too Large Error​

  1. Reduce data length
  2. Lower error correction level
  3. Use URL shortener for long URLs
  4. Remove encryption if not needed

Next Steps​