A QR code doesn’t have to be a plain black-and-white grid. With a little care you can match your brand colors and drop a logo in the middle — and still have it scan on the first try. The trick is understanding error correction and contrast.
This guide covers how to style a QR code without breaking it, and which format to export.
TL;DR — Enter a URL in the QR code generator, set your colors and add a logo, then export SVG for print or PNG for screens. Keep the code dark on a light background and the logo small.
Contrast is everything
A scanner needs to tell the dark modules from the light background. The safest combination is a dark code on a light background — the way scanners expect. You can use brand colors, but keep strong contrast: a dark navy or deep brand color on white works; pale-grey-on-white or light-on-dark often fails.
Always leave the quiet zone — the empty margin around the code. Without it, scanners struggle to locate the code at all.
Adding a logo safely
QR codes include error correction that can reconstruct data even when part of the code is obscured. That’s what lets you place a logo in the center. The limit is size: keep the logo to roughly 20–30% of the code area. Bigger than that and there isn’t enough redundancy left to recover the data.
Generate the code at a high error-correction level when you add a logo, and always scan the result with a couple of phones before committing it to print.
Dot and corner styles
Rounded dots, classy corners and custom eye shapes make a code look designed rather than generated. These are cosmetic and safe as long as contrast and the quiet zone are intact. Style the dots and the three corner “eyes” to match your brand, then verify it still scans.
PNG vs. SVG
- SVG — vector, scales to any size with no blur. Use it for posters, packaging, business cards and anything printed.
- PNG — raster at a fixed resolution. Use it for screens: chat, slides, web pages.
Export a large PNG if you must use raster for print, but SVG is the right answer whenever the code will be resized.
Make one now
The QR code generator does all of this in your browser — colors, dot styles, a center logo, and one-click PNG or SVG export — with nothing uploaded. Enter a URL, style it, test it, ship it.