UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Styled QR Code with Logo

Create a branded QR code with a center logo overlay, custom colours, and high error correction so it stays scannable even with the logo covering the middle.

About Styled QR Code with Logo

Styled QR Code with Logo lets you generate a branded QR code that includes your company logo or brand mark at the centre, custom foreground and background colours, and adjustable error-correction so the code stays scannable even with up to 30% of the area covered. Plain QR codes work, but a branded code with the right colour palette and a centred logo dramatically improves trust and click-through on print, packaging, posters and trade-show signage. Upload a PNG, JPG or SVG logo, the tool draws it into a high-resolution canvas overlay on top of the QR matrix, optionally adds a white rounded-rectangle padding behind the logo so the matrix remains readable, then exports a single PNG. Default settings use Level H error correction (30% recovery), which is essential when a logo obscures part of the code.

Why use Styled QR Code with Logo

Branded codes outperform plain QR codes on every measured engagement metric — Level H error correction makes the logo overlay technically safe.
Live, real-time preview means you can iterate on logo size, colour and padding instantly before exporting — no Photoshop round trip.
Round-corner clipping built into the canvas overlay means the logo blends naturally with rounded brand marks (no manual masking step).
All processing happens in your browser using qrcodejs and a canvas compositor — your logo and QR target URL never upload to any server.
Custom dark/light colour pickers let you exactly match a brand palette — far simpler than tweaking hex values in a vector editor.
Single high-res PNG export drops directly into print or web with no watermark, signup or per-code limit.

How to use Styled QR Code with Logo

Type the URL or text the QR code should encode in the Content field — the QR re-renders automatically as you type.
Pick a size (256 to 800 px). Larger sizes are better for print at 300 DPI; smaller sizes load faster on web.
Change Foreground and Background colours to match your brand palette — keep strong contrast for reliable scanning.
Leave Error correction at H (30%) — this is what makes the centred logo overlay safe. Drop to Q only if the logo is small (under 15% of the code).
Click 'Logo image' and upload a PNG, JPG or SVG — drag the slider to set logo size as a percentage of the QR (10 to 30 is a safe range).
Toggle 'White padding behind logo' for cleaner contrast against busy QR patterns and 'Round logo corners' for a softer brand feel, then click Download PNG.

When to use Styled QR Code with Logo

Designing trade-show booth signage where a branded QR code drives traffic to a landing page or product demo.
Adding a scannable code to product packaging that needs to match the brand's visual identity rather than look like a stock QR.
Producing event posters or flyers where a clean, on-brand QR code reinforces trust at a glance.
Building a downloadable QR badge for a marketing campaign where the logo is recognisable from across a room.
Printing branded business cards or stickers with a QR linking to your portfolio, GitHub, or contact card.
Creating restaurant menu QR codes that show the restaurant logo at the centre — diners associate the code with the brand instantly.

Examples

Branded restaurant menu QR

Output: 600 × 600 px PNG QR code linking to the digital menu, with the restaurant logo at the centre on a clean white circle. Drops onto table-tent cards at 200 DPI.

Trade-show product demo QR

Output: Large 800 px PNG with brand-blue modules on a soft-grey background and the product icon at centre. Visible from across a trade-show floor; scans reliably from 1.5 m.

Personal portfolio business card

Output: 400 × 400 px PNG QR with the user's avatar photo centre-clipped to a rounded square. Prints at 30 mm on a business card with reliable scan-on-first-try.

Tips

Always print a test scan from your phone before committing to a 1,000-flyer print run — colour shifts on cheap printers can drop scan reliability.
Keep the logo to 20% of the QR area or less — going to 25% is fine with Level H but starts to fail on dirty or partially-obscured prints.
If your brand colour is light (pastel pink, mint green), use it as the background and keep the foreground dark — scanners need contrast between modules.
For maximum reliability, use a square logo with internal whitespace rather than a long horizontal logo — a square logo overlaps fewer finder modules.
Export the QR code at 2x your final print size for a built-in resolution buffer when the printer applies anti-aliasing or sharpening.

Frequently Asked Questions

Does adding a logo make the QR code less scannable?▾

Only if you exceed the error-correction headroom. Level H allows up to 30% of the code to be obscured before scanning fails. Keeping the logo to 20% of the QR area (the default) leaves comfortable margin and almost always scans on the first try.

What logo file formats are supported?▾

PNG, JPG, JPEG, GIF, SVG, and WebP all work. PNG with transparent background looks best because the QR pattern shows through transparent regions of the logo when 'White padding' is off. SVG also works and stays sharp at any resolution.

Why does my QR code fail to scan after adding the logo?▾

The most common causes are: logo too large (drop below 25%), error correction set to L or M (raise to Q or H), low contrast between QR foreground and background (black on white is safest), or padding toggled off when the logo overlaps a finder pattern. Toggle 'White padding behind logo' on for the safest default.

Is the logo and the QR target URL uploaded anywhere?▾

No. The tool runs entirely in your browser. The logo file is read locally with FileReader, the QR is generated locally with qrcodejs, and the canvas compositing happens in your browser tab. Nothing is sent to a server.

Can I use this for a paid or commercial QR code campaign?▾

Yes — the tool is free for any use including commercial campaigns. There is no watermark, no signup, no per-code limit. The exported PNG is yours to use as you wish.

What size should I export for printing?▾

For business-card-scale prints (3 cm square), export at 600 px or larger to maintain 200 DPI. For poster-scale prints (10+ cm), export at 800 px or print the SVG version of the QR (without the logo) and composite the logo at vector level in Illustrator.

How do I get a transparent-background QR for design use?▾

Set the Background colour to a colour that does not appear in your design, export, then remove that colour in your image editor (Photoshop, GIMP) using Magic Wand. For clean transparency, work in Illustrator with the QR Generator's plain-QR SVG output and add the logo there.

Can I round the corners of the entire QR code, not just the logo?▾

This tool rounds only the logo overlay. To round the QR's outer frame, take the exported PNG into Photoshop or Figma and apply a rounded rectangle clip mask. The QR matrix itself uses square modules, which is required by the QR specification.

Explore the category

Glossary

Error correction level: QR codes have four levels (L 7%, M 15%, Q 25%, H 30%) controlling how much of the code can be damaged or obscured before scanning fails. Higher levels add redundant data, enabling logo overlays at the cost of code density.
Module: A single black or white square in the QR matrix — the basic unit. A typical QR has 21 to 177 modules per side depending on the version (data capacity).
Finder pattern: The three large square markers in the corners of every QR code. Scanners use these to detect the code's position and orientation. Logos must never cover a finder pattern.
Quiet zone: The blank margin around the entire QR code required for reliable scanning. The QR specification requires at least 4 modules of quiet zone on all four sides.
Canvas compositing: The browser-side process of layering the QR image and the logo image onto an HTML5 canvas, then exporting the merged result as a single PNG file.
Damage tolerance: The percentage of a QR code that can be unreadable (covered, dirty, torn) while the encoded data is still recoverable. Equal to the error correction level percentage.