QR Code for Website — Generate a QR Code That Links to Your URL

The most common QR code use case is encoding a URL. Scan the code on a flyer, business card, or product package and the phone opens a web page. The mechanics are simple — the complexity is in making the code scannable reliably and placing it where users will actually use it.

Use the QR Code Generator to generate a QR code for any URL and download it as SVG or PNG.

Creating a QR code for a website

Step 1: Decide on the URL to encode

Two options:

Encode the destination URL directly — the QR code contains the full URL (e.g., https://example.com/summer-sale/). Simple, no infrastructure needed. Limitation: if the URL changes, the QR code breaks. Printed materials become useless.

Encode a redirect URL — encode a short URL you control (e.g., https://yourdomain.com/q/summer), which redirects to the destination. If the destination changes, update the redirect. Printed QR codes keep working.

For anything printed in volume — business cards, packaging, signage — always use a redirect URL. Direct URLs are fine for one-off digital uses.

Step 2: Format the URL correctly

• Always use https:// not http://. Browsers warn users about non-HTTPS URLs.
• Include the trailing slash for directories to avoid unnecessary redirects: https://example.com/blog/ not https://example.com/blog
• Remove UTM parameters from the encoded URL — add them at the redirect layer, not in the QR code itself. A URL with UTM params is significantly longer, making the QR code denser and harder to scan.

Step 3: Generate and download

1. Open QR Code Generator
2. Select “URL” as the content type
3. Paste your URL
4. Set error correction: M for digital use, H for print
5. Download as SVG for print, PNG for digital

Step 4: Test before deploying

Scan the generated QR code with at least two different devices (iOS and Android). Verify it opens the correct URL. Test the scan at the actual print size you plan to use.

Error correction levels for URLs

URL QR codes should use at least Level M (15% damage recovery). For printed materials, use Level H (30% damage recovery):

Higher error correction = denser QR code (smaller modules) = harder to scan at small print sizes. At Level H, a URL QR code should be printed at minimum 2×2cm.

URL length and code density

QR code density increases with URL length. Longer URLs require more data capacity, which means a higher QR version (larger grid), which means smaller modules at the same physical size.

Impact of URL length on QR code density:

Practical conclusion: keep encoded URLs under 50 characters for the most scannable codes. Use URL shorteners or path-based redirects if your destination URLs are long.

Print formats: SVG vs PNG

SVG (Scalable Vector Graphics) — for print

SVG is vector-based — it’s defined mathematically, not as a grid of pixels. An SVG QR code can be scaled to any print size (5cm, 50cm, 500cm) without any loss of sharpness. Your print vendor can output it at 300, 600, or 1200 DPI.

Use SVG for: business cards, flyers, posters, packaging, any printed material.

PNG (Portable Network Graphics) — for digital

PNG is raster — a grid of pixels. At the download resolution (typically 512×512px or 1024×1024px), it looks sharp on screen. It will pixelate if printed at large sizes.

Use PNG for: web pages, social media posts, email newsletters, digital signage on screens.

PDF — for production printing

If your print production house requires PDF, export the SVG to PDF via Inkscape (free), Illustrator, or any vector editing tool. Vector → PDF preserves the sharp edges.

Customizing your website QR code

Adding a logo

A logo or icon in the center of a QR code looks more professional than a bare grid. It works because Reed-Solomon error correction allows ~30% of the code to be obscured while still decoding correctly.

Rules for logo overlays:

• The logo should cover no more than 25–30% of the QR code area (the error correction budget)
• The logo must be centered — don’t offset it
• Use the QR code at Level H error correction when adding a logo
• Test the code after adding the logo — scan with multiple devices

Color QR codes

Standard: dark modules on white background. You can use brand colors:

• Dark color modules on a light background (not the reverse)
• Contrast ratio between dark and light modules must be at least 4:1
• Avoid red as the dark color — early phone cameras struggle with red
• Avoid gradients within the code area

What to label around the QR code

A standalone QR code gives users no indication of where it leads. Add context:

• “Scan to visit [website name]”
• “Scan to book a table”
• Your domain name in text: xerobit.dev
• A simple URL below the code (belt and suspenders — users who can’t scan can type it)

Placement best practices

Physical placement

Eye level: Place codes between 1–1.5 meters from the floor when possible. Codes placed too high (on a wall near the ceiling) or too low (on the floor) require awkward scanning positions that reduce usage.

Lighting: Ensure the code has consistent, glare-free lighting. Laminated codes under overhead lights often have a glare spot that blocks scanning.

Quiet zone: Leave 4–8 modules of white space on all sides of the code. Don’t let the code run to the edge of a card or bump against text/graphics.

Minimum print size: 2×2cm for indoor scanning from 30–40cm. 5×5cm for outdoor or wall-mounted codes scanned from 1m+.

Digital placement

On websites: QR codes on web pages are rare (users are already on a screen — just use a link). Exceptions: linking to a mobile app install, bridging to an offline experience, or providing a code for display on a second device.

On presentations: QR codes at the end of a presentation slide link to resources, handouts, or contact info. Make the code large — at least 8×8cm equivalent at presentation size. Include the URL in text for anyone who misses the scan.

Testing a website QR code

Before deploying:

1. Test with iOS camera (native, no app)
2. Test with Android camera (or Google Lens)
3. Test at the actual printed/displayed size — not at your screen zoom
4. Test in the actual lighting conditions — outdoor codes in sunlight behave differently than indoor codes under fluorescent lighting
5. Test the destination URL — verify it loads on mobile, has no redirect loop, and has a mobile-optimized layout

If scan success rate is below 100%:

• Increase code physical size
• Increase error correction level
• Reduce URL length (use redirect)
• Check contrast (darken modules or lighten background)

Tracking QR code scans

QR codes themselves don’t track scans — they’re just encoded data. Tracking happens at the redirect layer:

1. Create a redirect URL at a custom domain you control: yourdomain.com/q/summer-sale
2. Log all requests to that path in your server/analytics
3. Add UTM parameters to the final destination URL: ?utm_source=qr&utm_medium=print&utm_campaign=summer-sale
4. View campaign performance in Google Analytics 4

This gives you scan count per code, geographic distribution, device breakdown, and conversion tracking — without making the QR code any larger.

Related tools

• QR Code Generator — generate QR codes for URLs, WiFi, vCards, and text
• URL Encoder — encode special characters in URLs
• Image Compressor — optimize PNG QR codes for web use