QR Code Generator With Logo
Create a QR code with a logo in your browser. Upload your logo, choose your brand colors and add a frame with a call to action, then download the branded QR code as PNG, SVG or PDF. Free, no signup needed to download.
This QR code generator with logo makes branded QR codes of any kind: a website, a menu, an app download, a coupon or a business card. Make a QR code with a logo once, then use it on print and screens.
Frame color
Background color
Text above color
Text below color
Body color
Edge ball colorCreate a QR Code With Logo Examples
Tap on the images to zoom in
What is a QR code with a logo?
A QR code with a logo is a normal, scannable QR code with your brand mark placed in the center. It is also called a branded QR code or a custom QR code with logo. People see whose code it is before they scan, so more of them trust it and scan it.
The logo does not break the code because every QR code carries extra data that lets a phone rebuild the part the logo hides. This is called error correction. It has limits, so the size of the logo matters. Both are explained below.
You can add a logo to any type of QR code, and the file prints and displays like any other image.
How to add a logo to a QR code in 4 steps
Use a square image of your logo mark, saved as a PNG with a transparent background. Keep it simple. Details are in the logo file tips below.
In the generator at the top of this page, enter what the code should open, such as your website link. Check the link by opening it before you continue.
Open the design options, upload your logo and choose your colors, shapes and a frame such as “Scan me”. Keep the logo small so it stays well inside the code.
Scan the code with two or three phones. If it opens the right page, download it. Use PNG for screens and documents, or the PDF / SVG button for print.
Step by step: from link to finished logo QR code
To create a QR code with a logo, you will first need to register an account on Pageloot. You can try out our 14-day free trial to test premium features like code analytics.
Depending on what QR code you are creating you need to fill out all the data that's requested for generating the code.
When you are done with the QR code you will be able to try out various QR code designs. You can change the body type, color, edges, frame, and gradient.
Now most importantly to finish up, add your logo. You can choose from available logos or upload your own version.
Finish, by saving and downloading your QR code with logo. Now you can include and print the QR code on advertisements to share with your customers.
Logo file tips: what to upload
The file you upload decides how sharp the logo looks in a small space. Follow these rules and you avoid most problems:
Use a PNG with a transparent background. A JPG has a solid background, which shows as a white box around the logo.
Use a square image. A square mark fits the center of the code. A wide logo has to be shrunk until the text is too small to read.
Use the simple mark, not the full wordmark. Use the icon, monogram or initials. A long company name with a tagline turns into a blur at this size.
Use a high-resolution file. At least 500 x 500 px. The logo is shown small, but a larger file stays sharp when you print big.
Use solid shapes and few colors. Thin lines, shadows and small text disappear when the logo is scaled down.
How big can the logo be? Error correction explained
A QR code carries more data than it needs, so a phone can still read it when part of the pattern is dirty, scratched or covered. How much it can lose depends on the error correction level:
- Level L (low): the code still scans if about 7% of its data is lost.
- Level M (medium): about 15%.
- Level Q (quartile): about 25%.
- Level H (high): about 30%.
A logo hides part of the code, and the phone treats the hidden part as damage. That is why logo codes need the high level, and why the logo must cover well under 30% of the code. Higher levels also add more squares, so each square gets smaller and harder to print.
A safe size: keep the logo at about 20% of the code’s area or less. For a square logo that is a little under half the width of the code. The limit of 30% is a best case. Printing, light, camera angle and scuffs use up some of that margin, so leave room.
Never cover the three large squares in the corners. Test every finished code on at least two phones, and test again if you change the logo, the colors or the size.
Frequently asked questions
Enter your link in the generator at the top of this page, open the design options, upload your logo, and choose your colors and a frame. Scan the code to test it, then download it as PNG, SVG or PDF.
Keep the logo at about 20% of the code’s area or less. Error correction level H can rebuild about 30% of the data, but printing and scanning conditions use up some of that margin. Always test the finished code.
Every QR code carries extra data for error correction. The phone uses it to rebuild the part the logo covers. If the logo hides too much, there is not enough data left and the code fails.
There are four. Level L can lose about 7% of its data, M about 15%, Q about 25% and H about 30%. Logo codes use a high level, because the logo counts as lost data.
A square PNG with a transparent background, at least 500 x 500 px. Use the simple mark, such as an icon or initials, not the full wordmark.
Yes. You can add your logo, choose colors and a frame, and download PNG, SVG or PDF without an account. An email address may be requested. Tracking scans and editing the destination later need a Pageloot account, with a free 14-day trial.
No. A free code with a logo is enough if the link will not change. Choose dynamic if you want to change the destination after printing or see scan stats such as when, where and on what device.
The usual causes are a logo that is too big, low contrast between the code and the background, a light code on a dark background, a gradient that gets too pale, or a code printed too small. Fix the cause, then scan again on two phones.
Contact us and we’ll be happy to help!
4.86 / 5 stars rating
Where to use a custom QR code with logo Examples
Tap on the images to zoom in
At a trade show, dozens of booths show similar black-and-white codes. A branded QR code on your banner and brochures tells visitors which code is yours, and it can open your booth page, a demo booking form or a download.
Put your app icon in the center of the code and point it to your app page. Printed on a poster, packaging or a business card, it tells people what they get before they scan.
Add your logo and a frame that says “Scan for 10% off” to a coupon flyer or a print ad. Customers see the brand, scan, and land on the offer page.
Print a menu code with your restaurant logo on table cards or stickers. Guests know it is your menu, and a code in a high-contrast color is easy to read in a dim room.
How to get more scans from a logo QR code
-
Keep the logo small
Cover about 20% of the code or less. A smaller logo is the easiest way to keep the code readable. -
Use a clear, simple mark
A bold icon on a transparent background stays sharp when it is small.
-
Print it big enough
No smaller than 0.8 x 0.8 inches (2 cm). With a logo, 1 inch (2.5 cm) or more is a safer start. -
Keep dark on light
Use a dark code on a light background. Reversed codes fail in some scanner apps.
Color, frame and testing tips for a branded QR code
The squares must be clearly darker than the background. Black, dark navy, dark green or deep red on white or a very light color are all safe. Pale colors on white are not. Quick check: view the code in grayscale. If you can hardly see the pattern, a phone cannot either.
Add a frame with a short line of text such as “Scan me”. People scan more when they know what they get. Choose a frame style from the design options, and keep the frame color dark on a light background like the code.
A free code with a logo is enough when the link will not change: a menu, a website, a social profile. Add + to the end of the short link of a free code to see a public total scan count.
Pick a dynamic QR code if you may change the destination after printing, or want to see when, where and on which device people scan. Tick Track scans or Edit later in the generator to start a free 14-day trial.
Scan the final file, not just the preview. Test with two phones, from the distance people will stand, and in the light of the real location. Print one copy first and scan the paper version.
QR code with logo not scanning? Check these
This is the most common cause. If the logo covers more than about 20% of the code, the phone may not rebuild the missing part. Make the logo smaller, or make the whole code larger, then scan again.
Light squares on a light background, or a code and background in two similar colors, are hard to read. Use a dark code on a light background. Check the code in grayscale.
A light code on a dark background is called an inverted code. Some phone cameras read it, but many scanner apps do not. Use dark squares on a light background for any code that has to work for everyone.
A gradient is fine if every part of it stays dark enough against the background. A gradient that fades to a light color makes part of the code too pale to read. Use two dark shades, such as dark blue to dark purple.
A full wordmark, a tagline or a JPG with a solid background looks messy in the middle of the code. Upload the simple mark as a PNG with a transparent background.
Use at least 1 inch (2.5 cm) for a code with a logo. Download PNG at a larger size with the slider, or use the PDF / SVG button for print, and never stretch the image.
Learn more about QR codes with logos
