---
title: "How to Add a Company Logo to a QR Code"
description: "Step-by-step: upload a JPG, PNG or SVG logo to the Vitextra QR Code Generator web part, adjust the logo size and margin, raise the error correction level so that the code stays readable, and remove or replace the logo."
url: https://vitextra.com/en/support/kb/10266
language: en
published: 2026-10-14
modified: 2026-10-14
products:
  - "QR Code Generator"
author: "Lidija Reising"
tags: ["QR code with logo", "add logo to QR code", "branded QR code", "QR code logo size", "QR code logo margin", "error correction with logo", "SharePoint QR code logo", "Vitextra QR Code Generator"]
---

# How to Add a Company Logo to a QR Code

Step-by-step: upload a JPG, PNG or SVG logo to the Vitextra QR Code Generator web part, adjust the logo size and margin, raise the error correction level so that the code stays readable, and remove or replace the logo.

## Introduction

A logo in the center of a QR code tells people whose code it is before they scan it. [QR Code Generator](https://vitextra.com/en/products/qr-code-generator) places an image in the middle of the code and removes the dots under it, and the error correction built into the QR code restores the data that the image covers. This article shows how to upload a logo, fit its size and keep the code readable.

## Before you start

Prepare the image file:

- the supported formats are **JPG**, **JPEG**, **PNG** and **SVG**;
- for the best result, use an image of at least 300x300 pixels;
- a square or nearly square logo works best — a wide logo takes a narrow strip and its details become small;
- prefer PNG or SVG with a transparent background, or give the logo a plain background of its own.

## Step 1. Upload the logo

1. Open the page with the web part. To keep the logo for all visitors, open the page in edit mode.
2. Enter the data for the code on one of the tabs, so that the preview shows a QR code.
3. Expand the **Logo** section below the tabs.
4. Click **Upload image** and select the file.

The logo appears in the center of the code in the preview, and a thumbnail of the uploaded image is shown in the **Logo** section. If a file of another type is selected, the section shows the message *Supported formats: JPG, JPEG, PNG, SVG.* and the code does not change.

![The Logo section with an uploaded logo](https://static.vitextra.com/articles/10266/logo-section-en.png)
*The Logo section with an uploaded logo*

## Step 2. Adjust the size and the margin

After the upload two sliders appear in the **Logo** section.

| Setting | Range | Default | What it does |
| --- | --- | --- | --- |
| **Logo size** | 0.1 – 0.5 | 0.4 | The share of the code that the logo may take. The larger the value, the larger the logo and the more dots it covers. |
| **Logo margin** | 0 – 20 | 5 | The empty space between the logo and the nearest dots. A margin separates the logo from the pattern and makes it easier to see. |

Move the sliders and watch the preview. Start with a smaller logo and enlarge it only as far as the code still scans confidently.

## Step 3. Raise the error correction level

The logo covers a part of the data, and the scanner restores this part from the redundant data of the code. The amount of the redundancy is set in the **Error Correction** section.

1. Expand the **Error Correction** section.
2. Select **High** for a large logo. The default **Quartile** is enough for a small logo.

The levels **Low** and **Medium** leave too little reserve, and a code with a logo may stop scanning.

![The Error Correction section with the High level selected](https://static.vitextra.com/articles/10266/error-correction-en.png)
*The Error Correction section with the High level selected*

❗ **Important**  
The preview does not warn you when the logo is too large. Always scan the code with a smartphone after you change the logo, its size or the error correction level. If the code is not read, reduce **Logo size**, raise **Error Correction** or shorten the encoded data.

## Step 4. Check and save

1. Scan the preview with a smartphone and make sure that the code opens what it should.
2. Take the result with **Download** or **Copy**. The logo is included in the image in every format.
3. If the page is in edit mode, save or republish it. The logo is saved with the page as a part of the web part configuration, so the visitors see the code with the logo.

📝 **Note**  
The image is stored inside the configuration of the web part and not in a library of the site, so nobody needs additional permissions to see it. For the same reason avoid very large files: a file of several megabytes makes the page heavier. A logo of a few hundred pixels is enough.

## Replacing or removing the logo

- To replace the logo, click **Upload image** again and select another file. The size and margin settings are kept.
- To remove the logo, click **Remove image**. The dots return to the center of the code.

## Summary

To brand a QR code, upload a logo in the **Logo** section, fit it with **Logo size** and **Logo margin**, and set **Error Correction** to **High** for a large logo. The only reliable test is a scan with a real smartphone.

💡 **Tip**  
To match the colors of the code to the logo, see [KB10265. Customizing the QR Code Design: Shape, Colors, Gradient and Corners](https://vitextra.com/en/support/kb/10265).