Branding a Quick Response Code (QR Code) with a custom logo In a previous blog post, I discussed using Google Charts to quickly and efficiently create QR code images. A QR code or Quick Response code is a two-As I explored the Google Chart API for generating QR code images, I noted a particular parameter - CHLD, where you can configure the error correction level for the generated QR code. Setting this parameter to "H" allows for data recovery up to 30% of loss rate. Given the intent of QR codes being used in the physical world, this level of redundancy is critical, to account for wear & tear on the physical QR code image. This peaked my interest. What if I were to deliberately cause data loss... by digitally applying a branding logo over my QR code images? Branding a QR Code I have seen minor revisions or "branding" of QR codes, mostly where individuals have added a rather small logo to the center of a QR Code. It occurred to me that using the Google Charts CHLD parameter in conjunction with a URL shortening service (to minimize my payload size), may allow for me to brand a much larger surface area of a QR code image. Using bit.ly and Google Charts, I placed a logo over the center portion (data portion) on a number of QR code images, implemented with the CSS position property. By doing this, I discovered that I was able to cover up a significant portion of the QR code with my own branding, while maintaining the data integrity of the QR code image itself. <img style="position: absolute; top:200px; left:100px;" src= Tips and Tricks 
My Results  I created three branded QR code images. The first is a QR code that represents my dW profile, which I branded with my profile picture. Additionally, you will notice I also added an ICON treatment into the lower left corner, as your branding does not necessarily have to be contiguous across the QR code image. Next, I created a QR code image for the developerWorks web site. Finally, I experimented with a single merged image, with a QR code base color palette update to create a purposely branded logo for developerWorks (displayed at the start of this blog post).  I discovered that there is not a direct formula to determine to what
degree a brand logo can overlay a QR code image. As pointed out, there
are areas within the QR code image that are out of bounds, and cannot be
manipulated or overlapped. However, you can change the base color
palette and overlay a large percentage of the QR code if you follow my
tips. Contrast is also a critical factor, if you elect to change the
palette colors. Finally, I can not stress enough to test your branded
QR code images. My personal recommendation is to test with a lower
quality camera phone, and size your branding based on the lowest common
denominator of QR-code software and smart device to ensure your branded image works for the largest possible audience segment.To view an HTML example of my branded QR code images... click here. |
Comments (21)
