One of the questions I am most frequently asked is…can I put my logo inside of my QR code? The answer is…”yes!”
As you can see by the LynxTo QR code, its as simple as just placing your logo in a strategic area of the QR code (one that doesn’t take up too much real estate or cover areas that are critical to the reader’s understanding of the code). So the trick is knowing some basic do’s and don’ts to get this done quickly.
What to Know
- There are a variety of QR code types. Our experiment here was with the ones generated by LynxTo.com, but other generated QR codes will also work in most cases.
- There are 4 squares within squares that you can’t cover on a QR code and two lines connecting them that are scan zones that must be free of obstacles (these are on the top and the left). The rest of the code has a 30% error correction zone. In other words, you can cover around 30% of this area with your logo and still have a successful scan.
- Put a 2-3 pixel buffer (white space or border) around your graphic to help the barcode reader discover where your logo begins and the code ends.
- It takes some trial and error to get this right. Don’t give up.
How to Get Started Quickly
- First thing I did was get my QR Code generated (of course we did ours with a LynxTo generated code) and saved it to my desktop.
- Then I opened it up in a graphics program. In my case, I used Adobe Fireworks because as a web developer, its what I have available. You could also do this with Adobe Photoshop or the free, open source Gimp software or Microsoft Paint for really simple designs.
- I then took my logo and I shrunk it it a size that I thought might not intrude on the 30% space available.
- Next, I put a 3 pixel glow (with no fade and 100%) on my logo and stuck it in the middle of my QR code.
- It didn’t work. I tried scanning it, but it just wouldn’t pull it off. So I shrunk it a bit and tried again.
- It still didn’t work, so I started moving it around the code until I found a place. As you can see, I ended up with the logo in the bottom right corner. I could have shrunk the logo again, but decided I’d rather sacrifice area for size. This may be a decision you have to make.
- Finally, I saved it and will be putting it in my email signature line and may include it in my next round of business cards.
Don’t Just Go For Fluff
A reminder though, now that you have your shiny new QR code with a logo…remember, its not so much how it looks, but what the user experience is when they scan it. Make sure to let people know what lies behind that code (in some text nearby the code), whether a discount, Facebook page, video, contact information, a webpage, or all of the above. The key to a good QR code is in what it delivers, not so much what it looks like.
See How It Works for You. Share With Us.
I would love to see examples of how each of you use this technique and if you have success. Again, you can try it out by using one of our codes (ours has a mobile landing page and is free to try).
A More Detailed Account from Hack A Day
Here is a great article on the subject that is making its way around in Tweets, Hacker News and some other sources. Its a more technical article from the Hack A Day website called How to put your logo in a QR code. Its a great article if you want to know the nuts and bolts behind how QR codes work. It was a little daunting to me, so I decided to make it a little less technical in this article.
Hope this helped get you started fast!
