Skip to content

QR Code Generator with Logo

Custom QR codes with your colors and a logo in the middle. Built in your browser, downloaded as PNG or SVG, no signup.

In your browseryour files never leave your device.

Learn more

300 × 300px

Encoded: https://example.com (19 bytes)

or drop a PNG/SVG here

Logos sit on top of the QR pattern. Keep them ≤20% of the code area and use a transparent or solid background so scanners stay reliable. Error correction is auto-bumped to H when a logo is added.

About this tool

Most QR generators online are either ugly black-on-white squares or paywalled the moment you want a logo. This one isn't. Paste a URL, Wi-Fi config, vCard, or any text into the input field. Pick a preset (Modern, Classic, Ocean, Sunset, Forest, Midnight, Dark, and a few more) or open the customize panel for fine control over hex colors, dot style, corner shape, and gradients. Drop in a logo if your brand has one and the tool auto-bumps error correction to handle the obstruction. The preview updates as you type, and the export is either a PNG for screens or an SVG for print. The whole thing runs in your browser, which means the content you encode never leaves your device. I built it that way because there's no reason a QR generator should know what URLs you're scanning.

How to qr code generator with logo

  1. Paste what you want encoded

    A URL, plain text, a phone number (tel:), Wi-Fi credentials (WIFI:S:...), or a vCard block. Any of those goes straight into the textarea at the top. The preview starts drawing the QR as soon as you have at least one character in the field.

  2. Style it

    Pick one of the eight presets (Modern is the default and works for most use cases) or click Customize to open the panel with hex colors, dot style (square, rounded, dots, extra-rounded, classy, classy-rounded), corner shapes, and linear/radial gradients. Drop in a logo if you want one. The preview updates as you go so you can see exactly what you'll be downloading.

  3. Download PNG or SVG

    PNG for screens, emails, slides, and anywhere it'll be viewed at one fixed size. SVG for print, packaging, posters, business cards, and anywhere the QR might get resized. The PNG download size is set by the size dropdown in the customize panel (default 300px, up to 1000px); SVG ignores size because it's vector.

  4. Scan it before you ship it

    I always test the code with my phone camera before sending it anywhere. Logos placed too large will sometimes break the scan, and you only find out the embarrassing way. Test in worse lighting than the final use case will have, and test with both a current iPhone and a mid-range Android if you have access to both, because their scanners disagree on edge cases.

Features

Custom colors and gradients

Set foreground and background hex values directly, or use the color picker if you're not great with hex. Apply linear or radial gradients between two colors with an adjustable rotation slider (0 to 360 degrees). Eight built-in presets cover Modern, Classic, Dots, Ocean, Sunset, Forest, Midnight, and Dark looks. Stop using black-on-white squares when your brand uses different colors. Dark presets exist for inverted layouts where black-on-white would look out of place.

Logo in the middle

Drop in a PNG or drag one onto the upload area. The tool auto-bumps error correction to level H (the highest, with 30% redundancy) the moment you add a logo, so the QR stays scannable even with the center 20-25% covered. The library handles the placement automatically and hides the background dots under the logo so it looks clean rather than crammed in. Smaller logos are safer for print; larger logos look better on screens.

PNG or SVG output

PNG comes out at the size you pick (200, 300, 400, 600, 800, or 1000 pixels) and is fine for emails, slides, web pages, and anywhere screens are the destination. SVG scales without blurring, which matters the moment you put a QR on anything bigger than a business card. Posters, banners, packaging, signage, and anything destined for a commercial printer should use SVG because the file stays sharp at any scale.

Six dot styles plus corner styles

Pick between square (the classic look), rounded, dots, extra-rounded, classy, or classy-rounded for the data dots. Independently set the corner-square style (square, dot, extra-rounded) and corner-dot style (square, dot). This level of control is what paid services charge for; here it's in the customize panel for free. Different styles read better at different sizes; rounded shapes are forgiving at small print sizes while square is densest.

Privacy & security

Encoding a QR code is deterministic math — the same input always produces the same matrix of black and white squares. The library doing that math (qr-code-styling) runs in your browser. The URL, Wi-Fi password, vCard, or whatever you encode never gets transmitted; it stays in your tab as a string that the encoder turns into pixels. Logo embedding draws your uploaded image onto a canvas on top of the QR matrix, also in the browser. When you click download, your browser writes the PNG or SVG to disk from memory.

Frequently asked questions

Is it free?
Yes. No signup, no per-day cap.
Where does my data go?
Nowhere. The code is generated in your browser using JavaScript. I built it that way on purpose.
What can I encode?
URLs, plain text, email addresses, phone numbers, Wi-Fi credentials, vCards, SMS templates, and geo coordinates.
Can I add a logo?
Yes, upload any PNG. Keep the logo under about 20% of the QR's area or you'll start losing scan reliability on smaller print sizes.
What's an error correction level?
The redundancy baked into the QR. Level L recovers from about 7% damage, M about 15%, Q about 25%, H about 30%. Higher levels mean more dots packed into the same space, so the QR looks denser but tolerates more covering or wear. The tool defaults to Q and bumps to H automatically when you add a logo.