ArrayKit

QR Code with Logo

Put your logo in a QR code, restyle its colors, shapes and frame, and watch it get read back as you design — all in your browser, nothing uploaded.

QR Code with Logo

Put your logo in a QR code, restyle its colors, shapes and frame, and watch it get read back as you design — all in your browser, nothing uploaded.

The logo, the content and the finished code stay in this tab. Only the design settings (colors, shapes, frame) are remembered on your device; the text you encode and the logo file are not stored.

Check a finished code with the QR Code Reader

About QR Code with Logo

This QR code maker puts your own logo in the middle of a code and lets you restyle everything around it: foreground and background colors or a two-color gradient, square, rounded, dotted or diamond modules, three eye shapes with their own colors, and an optional frame with a label such as SCAN ME. A logo hides part of the pattern, so the tool ties error correction to it. Auto raises the level when a logo is present, and the size slider stops at the largest logo that level can rebuild. Every change is redrawn at once and the finished image is decoded again in the page, so you see a confirmation, or a plain-language warning, before anything is printed. Colors and shapes are remembered on this device; the content and the logo are not, and nothing is uploaded.

Features

  • Add a PNG, JPEG, SVG or WebP logo up to 1 MB, with a square or round plate behind it
  • Logo size slider capped at what the chosen error-correction level can rebuild
  • Auto error correction that moves up to Q or H when a logo is added, and says why
  • Square, rounded, dot and diamond modules with separate outer and inner eye shapes
  • Solid colors or a two-color gradient with an adjustable angle
  • Frame above or below the code with your own label and colors
  • Live read-back check: the rendered image is decoded and compared with your text
  • Six one-click presets, then PNG at 256 to 2048 px or SVG for print

How to use the QR Code with Logo

  1. Type or paste the link or text into the content box
  2. Pick a preset, then adjust colors, module shapes and eyes
  3. Choose a logo file and set its size; the slider stops at the safe limit for the error-correction level
  4. Optionally add a frame with a label such as SCAN ME
  5. Wait for the scan check to turn green, then download the PNG or SVG

Example

Input

Content: https://example.com
Error correction: H
Logo: 22% of the width, round plate
Modules: rounded dots, round eyes

Output

1024 px PNG downloaded
✓ Scans correctly — the image decodes back to https://example.com

The check decodes the same pixels you download, so a logo that is too big shows up before printing.

Common errors & troubleshooting

  • The code stops scanning after a logo is added. — The logo covers more of the pattern than the error correction can rebuild. Shrink it or raise the level to H. The slider already stops at the safe limit for the level in use.
  • A warning says the colors are inverted or the contrast is low. — Scanners expect dark modules on a light background with strong contrast. Swap the two colors or darken the foreground; a one-click fix appears under the warning.
  • The code scans on screen but not on paper. — Keep a quiet zone of at least four modules, print at least 2 cm wide, and use the SVG for large prints so the edges stay sharp.
  • The logo file is rejected. — Use a PNG, JPEG, SVG or WebP under 1 MB. A simple logo on a transparent background works best; resize large photos first.

Frequently asked questions

How big can the logo be in a QR code before it stops scanning?
It depends on the error-correction level. Level L can only rebuild a logo about a tenth of the code's width, while level H allows roughly a quarter. The size slider is capped at the limit for the level in use, and the live read-back tells you whether the result still decodes.
Why does a QR code with a logo need error correction level H?
A logo replaces real modules, and the code survives only because its error-correction data can rebuild them. Level H restores up to about 30% of the data, so it tolerates the biggest logo. The Auto setting uses Q or H whenever a logo is present.
Which QR code colors scan reliably, and does a gradient work?
Dark modules on a light background with strong contrast are safest; aim for a contrast ratio of at least 4 to 1. A gradient scans fine while both ends stay dark enough against the background. Avoid light modules on a dark background, which many scanner apps cannot read.
Should a QR code with a logo be saved as PNG or SVG for print?
Use SVG for anything printed or enlarged, because it is vector and stays sharp at any size. Use a PNG of 1024 px or more for web pages, slides and documents.
How do I test a QR code with a logo before printing it?
The page decodes the rendered image after every change and shows whether the same text comes back. For print, also scan a proof at the real size and distance with a phone.
Are my logo and link uploaded when I design a QR code here?
No. The logo is read by your browser and embedded in the code, and neither it nor the text is sent anywhere. Only the design settings are remembered on this device.

Related tools

  • QR Code Generator — Generate a QR code from text or a URL; download as PNG or SVG.
  • QR Code Reader — Scan a QR code from an image, a screenshot or your camera and see what is inside — links, Wi-Fi, contacts and payments.
  • vCard QR Code Generator — Turn contact details into a QR code phones can save in a tap, as vCard 3.0, 4.0 or MECARD, with a .vcf download.
  • WiFi QR Code Generator — Create a scannable QR code that joins a WiFi network, with correct escaping.
  • Bulk QR Code Generator — Turn a list or a CSV into up to 500 QR codes as a ZIP of PNG or SVG files, or a printable labelled sheet.
  • SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
  • Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
  • Favicon Generator — Make favicon.ico, PNG sizes, an Apple touch icon and a web manifest from an image, letters or an emoji.

More Encode / Decode tools

See all Encode / Decode tools (30) · All tools