QR Code Generator Introduction
A logo in the center of a QR code tells people whose code it is before they scan it. 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
- Open the page with the web part. To keep the logo for all visitors, open the page in edit mode.
- Enter the data for the code on one of the tabs, so that the preview shows a QR code.
- Expand the Logo section below the tabs.
- 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.
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.
- Expand the Error Correction section.
- 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.
❗ 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
- Scan the preview with a smartphone and make sure that the code opens what it should.
- Take the result with Download or Copy. The logo is included in the image in every format.
- 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.