Encode

QR Code Generator

Pick a content type, fill in the data, then tune the module shapes, finder patterns, colors, background, logo, and error correction level. The preview updates live, export size is set separately, and PNG, SVG, WebP, and JPEG are one click away. Everything runs inside your browser tab, so Wi-Fi passwords, contact details, and tracking URLs never leave the device.

  • Seven content types, each with the right escaping rules: URL or plain text, Wi-Fi (WIFI URI spec), email (mailto with RFC 6068 percent-encoding), phone (tel), SMS (sms), and vCard 3.0 (RFC 6350 field escaping)
  • Three style layers can be tuned independently: data modules, finder patterns, and finder centers, each with six shape options
  • Single color or two-stop linear or radial gradient on any layer, plus transparent, solid or gradient background, with brand color presets or direct hex input
  • Center logo with adjustable size and margin; a Hide background dots toggle keeps the QR scannable when the logo overlaps modules
  • Error correction L, M, Q and H from 7 to 30 percent redundancy, with Q or H recommended whenever a logo is in the center
  • Live preview at a fixed display size keeps visual comparisons stable, while the export resolution is a separate field from 50 to 1000 pixels
  • Local-only generation with no uploads and no telemetry, safe for Wi-Fi passwords, vCard contact info and campaign tracking URLs
tools/QR Code Generator
Text / URL

The data encoded in the QR code. Scan the QR code to read this content.

Only affects the downloaded file. The preview stays fixed so styles are easy to compare.

Dots color
Type
Rotation (deg)
Color 0
Color 1
Offset 0: 0.00
Offset 1: 1.00
Corner square color
Type
Rotation (deg)
Color 0
Color 1
Offset 0: 0.00
Offset 1: 1.00
Corner dot color
Type
Rotation (deg)
Color 0
Color 1
Offset 0: 0.00
Offset 1: 1.00

Overview

A QR generator with the parts that matter for shipping: proper escaping for each content type, independent styling of the three structural QR elements, and a stable preview and export pipeline.

  1. 01

    Seven properly escaped content types

    URL or plain text, Wi-Fi using the WIFI URI spec with full backslash escaping, email via mailto with percent-encoded subject and body, phone via tel, SMS via sms with percent-encoded body, and vCard 3.0 with RFC 6350 field escaping. Wi-Fi passwords that contain semicolons or backslashes actually scan correctly.

  2. 02

    Three independent style layers

    The data modules, the three finder patterns in the corners used for orientation, and the inner dot inside each finder can each be styled separately. Choose from six shape options per layer: square, rounded, dots, extra rounded, classy, and classy rounded.

  3. 03

    Single color or two-stop gradient per layer

    Each layer can switch between a flat hex color and a linear or radial gradient with two color stops, rotation, and offset positions. Use the same gradient across all three layers for a unified brand look, or contrast the finders against the modules for a designer touch.

  4. 04

    Transparent, solid or gradient background

    Transparent by default so the code drops cleanly into Figma, Canva, posters and slide decks. Switch to a solid hex color when the destination needs an opaque background, or to a two-stop gradient for posters and social cards.

  5. 05

    Style and color presets

    Nine shape presets and 31 color presets (19 brand-friendly solids plus 12 named gradients) apply all three style layers at once. Tweak afterwards if needed.

  6. 06

    Center logo with safe overlap

    Upload any PNG, JPG or SVG and place it in the QR center. Adjust logo size from 0 to 50 percent of QR width, set a logo margin, and toggle Hide background dots so modules under the logo are masked cleanly and the QR stays scannable.

  7. 07

    Error correction L, M, Q and H

    Quick reference: L is 7 percent redundancy, M is 15, Q is 25, and H is 30. Use Q or H whenever a logo is present, since the redundant data lets the QR survive the visual occlusion.

  8. 08

    Stable preview plus separate export resolution

    The preview renders at a fixed display size so styling tweaks are easy to compare. The export resolution is a separate field from 50 to 1000 pixels, so you can tune brand details at one zoom and ship at another.

  9. 09

    PNG, SVG, WebP and JPEG export

    PNG for general use, SVG for print and vector editing with infinite scaling, WebP for modern web at the smallest file size, and JPEG only for systems that hard-require JPG, since it loses transparency.

  10. 10

    Local-only generation

    Built on qr-code-styling running entirely inside the browser tab. Wi-Fi passwords, contact details, internal URLs and campaign tracking links never touch a server.

How to use

Six steps. The preview rebuilds live as you change any control.

  1. 01

    Pick a content type (URL, text, Wi-Fi, email, phone, SMS, or vCard) and fill in the fields. The page builds the underlying WIFI, mailto, tel, sms, or vCard payload for you with proper escaping.

  2. 02

    In Basic, set the export size in pixels, the quiet zone margin, and the error correction level. Use Q or H if you plan to add a logo.

  3. 03

    Apply a shape preset and a color preset to get a sensible looking QR in one click, then refine the module, finder, and finder center layers individually.

  4. 04

    Switch the background to solid or gradient if the QR is going onto an opaque surface, or keep it transparent for design files.

  5. 05

    Upload a center logo (PNG or SVG works best), set its size to roughly 25 to 35 percent of the QR width, and keep Hide background dots on so the data modules behind the logo are masked cleanly.

  6. 06

    Scan test the preview with a real phone, then download as PNG, SVG, WebP or JPEG with your chosen filename.

Details

The three style layers, the background and the logo cover every visual decision. Knowing which one drives which part keeps tuning fast.

  • Data modules are the small dots that carry the actual encoded data. Their shape is what users register as the QR style. Rounded and classy rounded look modern, while square reads as traditional.
  • Finder patterns are the three large square markers in the top-left, top-right, and bottom-left corners. Scanners use them to detect orientation, so unusual shapes like dot or classy cost a little scannability.
  • Finder centers are the smaller square inside each finder. Styling them differently from the outer finder is the simplest way to add personality without breaking detection.
  • Background: leave transparent for designer hand off, solid for stickers, labels and business cards, or gradient for posters and event signage.
  • Error correction: Q at 25 percent is a strong default that survives small logos and moderate damage. Bump to H at 30 percent for larger logos or harsh print environments.
  • Logo: keep its size around 20 to 35 percent of the QR width and keep Hide background dots on. Anything larger eats into the error correction budget.
  • Quiet zone margin: never go below four modules of clear space. Scanners need it to lock on, and tight crops are a common reason real world prints fail to scan.

Use cases

Recurring jobs the page is built for. The same workflow (pick a type, design, export) covers the different places QR codes actually show up.

  1. Marketing landing page QR

    Encode a campaign URL, ideally a trackable short link with UTM tags, into a branded QR for posters, table tents, packaging inserts and event signage.

  2. Wi-Fi for cafes, offices and events

    Generate a WIFI URI with SSID, password and encryption type. Scanning joins the network without typing the password, even when the password contains symbols or Unicode.

  3. vCard business card

    Encode name, phone, email, organization, title and URL as a vCard 3.0 record. Scanning saves the contact directly into iOS or Android contacts.

  4. Email a team CTA

    A mailto QR with a pre-filled subject and body is useful for poster CTAs, lead magnets, support entry points, RSVPs and event check-ins.

  5. SMS opt-in for promotions

    An sms QR with a pre-filled message (for example, JOIN) triggers an SMS draft on scan, used for SMS marketing opt-ins and reception desks.

  6. Restaurant or retail tap-to-call

    A tel QR places a phone call on tap, useful for service signage, taxi cards, real estate signs and customer service stickers.

  7. Branded QR with logo

    Upload the brand mark, switch to error correction Q or H, leave the logo at around 25 percent of the QR width, and the result still scans reliably while looking on brand.

  8. Transparent QR for Figma or Canva

    Generate with a transparent background and download as SVG to drop straight into design files without any background removal step.

  9. Multi-channel campaign rollup

    Generate matching QRs with the same palette and shapes for poster, web, packaging and social, exporting each at the right resolution and file format from one workspace.

  10. Pre-filled form deep link

    Encode a URL with query parameters into a QR so scanning opens a form pre-populated with the campaign, source or location, saving manual entry and improving form completion rates.

See also

When the QR encodes a long URL with non-ASCII characters, UTM tags, OAuth callbacks or messy query parameters, prepare the link with URL Encoder and Decoder first so the percent-encoding is correct before it gets baked into the QR. For long text, SMS bodies or vCard data, check the character count and UTF-8 byte length first with Text Counter . Long payloads force higher EC levels and lower scan reliability. If the logo file is multiple megabytes or has unnecessary alpha channels, shrink it through Image Compressor before uploading. And when the destination is a SKU, asset ID, carton number or ticket (not a URL or contact action), switch to Barcode Generator instead, since 1D barcodes are denser per character for short numeric or alphanumeric payloads.

Best practices

Practical habits for QR codes that need to scan reliably on screens, printed materials, and low-light surfaces.

  • Use error correction Q (25 percent) as the default. Bump to H (30 percent) whenever you add a logo, print onto rough material, or expect partial occlusion.
  • Keep the quiet zone margin at four modules or more. Scanners use the surrounding light area to locate the code, and tight crops are a top reason printed QRs fail to read.
  • Test scan in the real environment before printing. The phone you tested on, the lighting in the actual venue, and the angle people scan from all matter. Borrow two different phones and try at distance.
  • Keep the foreground noticeably darker than the background. Modern scanners tolerate light on dark, but dark on light still has the highest first-scan success rate.
  • Avoid heavily styled finder patterns if absolute reliability matters. Dot or classy finders look great but cost roughly 5 to 10 percent of scan reliability on older scanners.
  • For URLs going into a QR, use a short link (UTM tagged or branded). Short links survive lower export resolutions and let you change the destination later without reprinting.
  • Pick the right file format for the destination: SVG for print, packaging, and poster work, PNG for slides and email, WebP for modern websites, and JPEG only when a system requires JPG.
  • When using transparent backgrounds, confirm the final substrate is light and uniform. Patterned or photo backgrounds behind a transparent QR usually kill scannability, so put a solid white card under the code.
  • Save the original SVG of every production QR. Re-exporting from SVG keeps quality, while re-rendering from a PNG screenshot does not.
  • For Wi-Fi codes, double-check that the password actually contains the characters you typed. Symbols like semicolon, comma, colon and quote need the escaping this page applies, but a wrong character in the field will silently produce a QR that joins the wrong network.

Limitations

The page is a generator and a designer, not a campaign management platform. Knowing the boundaries keeps the toolbar honest.

  • Generates static QR codes. The encoded data lives in the QR pattern itself, so changing the destination means regenerating. For dynamic redirects, encode a short link and edit its destination separately.
  • The maximum payload depends on character set and error correction. Roughly: 7 KB numeric, 4.3 KB alphanumeric, and 3 KB UTF-8 byte mode at the loosest EC. Long vCards or paragraphs hit the limit fast.
  • Heavy gradients on the finder patterns reduce scannability on older devices. Stick to high contrast colors for the finders even if the data modules use a gradient.
  • The page does not perform QR scanning or decoding. To verify a generated code, scan with a real phone or a dedicated decoder.
  • The logo is overlaid on the finished QR. It is not encoded into the data. Keep the logo small relative to the QR width and rely on error correction to absorb the visual occlusion.
  • The export resolution only affects raster outputs (PNG, WebP, JPEG). SVG is resolution independent and the size field controls the SVG viewBox, not pixel dimensions.
  • JPEG does not support transparency. Using JPEG with a transparent background will fill the background with white automatically.
  • Color contrast still matters with gradients. Test the lowest contrast point of the gradient against the background, since that point is where scanning will fail first.
  • All processing happens in the browser via qr-code-styling. There is no server, no analytics on the encoded payload, no shared link and no cloud copy.

FAQ

Practical answers about content types, scannability, logo placement, file formats, error correction, and the difference between static and dynamic QR codes.

Is the QR code dynamic or static?

Static. The data is encoded directly into the QR module pattern, so changing the destination means generating a new QR. For dynamic destinations, encode a short link or a redirect URL and update that target outside the QR.

What is the maximum payload?

It depends on the character set and the error correction level. Rough upper bounds: 7 KB numeric, 4.3 KB alphanumeric, and 3 KB UTF-8 byte mode at the loosest EC. Q at 25 percent and H at 30 percent reduce capacity significantly, so long vCards usually need M or L.

Why does adding a logo sometimes make the QR unscannable?

The logo covers data modules. Three fixes: keep the logo at 20 to 35 percent of the QR width, raise error correction to Q or H, and keep Hide background dots on so the area under the logo is masked cleanly instead of half rendered.

Which error correction level should I use?

Without a logo, M at 15 percent is fine for most cases. With a logo, Q at 25 percent is the safe default, and H at 30 percent is better for larger logos or rough print environments. Going from L to H roughly halves data capacity but doubles tolerance for damage.

What is the difference between data modules, finder patterns and finder centers?

Data modules are the small squares across the whole QR that carry the encoded data. Finder patterns are the three large markers in the top-left, top-right and bottom-left corners that scanners use for orientation. Finder centers are the smaller square inside each finder pattern. You can style all three independently.

Is the WIFI URI standardized? Does it scan everywhere?

Yes. The WIFI URI is the de facto standard used by iOS, Android and most camera apps. This page applies the spec's escaping rules so passwords that contain backslash, semicolon, comma, colon or double quote work correctly.

Why does my vCard scan but show garbled text?

Older vCard generators did not escape commas, semicolons, backslashes and newlines in vCard fields. This page applies RFC 6350 escaping. If you have broken QRs in old printed materials, regenerate them with this version.

Why does the preview stay the same size when I change the Size field?

The preview is deliberately fixed so style changes are visually stable. The Size field controls the export resolution, which is the actual pixel dimension of the downloaded PNG, WebP or JPEG. SVG is resolution independent.

Is a transparent background safe for print?

Only when the substrate is light, uniform and high contrast against the QR foreground. Patterned or photo backgrounds behind a transparent QR usually kill scannability, so switch to a solid white background or print onto a solid card.

Which file format should I download?

PNG for general digital use such as slides, docs and email. SVG for print, vector editing or unlimited scaling. WebP for modern websites at the smallest file size. JPEG only when a system requires JPG, and never with a transparent background.

Can I use any image as a logo?

Yes. PNG, JPG, SVG and WebP all work. SVG logos give the best results at large export sizes. Transparent PNG logos work well too. Avoid logos with text that needs to stay legible at small QR sizes.

Does any of my data leave the browser?

No. QR generation, logo embedding and all downloads happen inside the current browser tab. Wi-Fi passwords, vCard contact info and tracked campaign URLs never go to a server.

Can I scan and decode a QR with this tool?

Not yet, this page only generates. To verify what a generated QR encodes, scan it with a phone camera, or paste the underlying string shown in the Generated content textarea (for non-text types) into a QR decoder.

Related tools

Continue across the encode toolset: percent-encode the URL before embedding it in a QR, switch to a barcode when the destination is a product label or asset ID, or convert other formats with the Base64 and JWT inspectors.