How to Add a Logo and a Frame to a QR Code (and Keep It Scannable)
A plain QR code is a grey square: nobody knows what it leads to or why they should scan it. A logo in the middle tells people who it comes from, and a frame with “Scan me” or “Menu” tells them what to do. Both make people far more likely to pick up their phone.
This guide shows how to add a logo and a frame with the free QR Code Generator, and how to make sure the result still scans. New to QR codes? Start with how to make a QR code.
Why a logo doesn’t break the code
Covering part of a QR code with a picture sounds like a bad idea, but QR codes are built for it. Every code carries extra, repeated data called error correction, so a scanner can rebuild the parts it can’t read. There are four levels:
- Low (7%) and Medium (15%): fine for plain codes, too weak for a logo.
- Quartile (25%): enough for a small logo.
- High (30%): the safe choice with a logo. Up to 30 % of the code can be covered or damaged and it still scans.
When you add a logo, the generator switches to High for you and keeps the logo to about a fifth of the code’s width, well below what High can repair. If you lower it to Low or Medium, it warns you.
How to add a logo to a QR code
- Open the QR Code Generator and type your web address. The code appears as you type. You can also make a business card QR code or a text QR code; logos and frames work the same way.
- Under Logo, pick one of the Ready-made logos, or click Upload your own to use your company’s logo (PNG, JPG, WebP or SVG).
- Check the preview, then click Download PNG or Download SVG.
The ready-made logos come in three groups:
- Scan me badges, which say what to do in the code itself.
- Apps: WhatsApp, Instagram, Facebook, YouTube, TikTok, X, Telegram, Snapchat, Pinterest, Threads, Spotify, Discord, PayPal, Google Maps, the App Store and Google Play, each in its own colours. Use them on codes that lead to your own page or account there.
- Contact icons: website, email, phone, location, Wi-Fi and contact card.
Tip for your own logo: a simple, square logo on a transparent or white background works best. A wide logo with small text becomes unreadable at that size; use just the symbol or your initials.
How to add a frame
A frame puts a short message around the code: “Scan me”, “Menu”, “Order here”, “Free Wi-Fi”. Under Frame, choose one of 15 styles, such as Label below, Speech bubble, Handwritten with arrow, Coffee cup, Shopping bag or Delivery scooter. Then type your message in Frame text (up to 24 characters).
The frame is drawn around the code, never on top of it, so it doesn’t affect scanning at all. It is included in both the PNG and the SVG.
Short, specific words work best. “Scan for the menu” beats “Scan me”, because people know what they get.
Colours that still scan
- Dark code, light background. You can use your brand colour for the Code colour, as long as it is clearly darker than the Background. The generator warns you when the colours are too similar.
- Be careful with light codes on dark backgrounds. Some scanners can’t read them. If you use them, test with several phones.
- Keep the quiet zone. The empty border around the code helps phones find it. Leave the Quiet zone on Standard unless the code already sits on a plain, light area.
PNG or SVG?
PNG is a picture, ready for websites, emails, social posts and documents; choose a large PNG size for print. SVG stays sharp at any size, so it’s the better choice for posters, menus, packaging and anything a printer or designer handles.
Test before you print
Always scan the finished code with two or three different phones, from the distance people will actually stand at. Check that it opens the right page. A wrong link on a thousand printed flyers is an expensive mistake.
Frequently asked questions
Does a QR code with a logo expire?
No. The codes made here are static: your link is stored in the code itself, so it works for as long as the page it leads to exists. No account or subscription is needed.
How big can the logo be?
The generator sizes it for you, at about a fifth of the code’s width, which is the safe size with High error correction. A bigger logo would risk covering too much of the code.
Is my logo uploaded?
No. The code, the logo and the frame are all drawn in your browser. Your logo never leaves your device.