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-dimensional bar-code that is readable by QR bar-code readers and smart phones.  You can use QR codes to represent display text , open a URL, or compose an email or SMS.  Quick Response codes are also known as hardlinks or physical world hyperlinks, and can store up to 4,296 alphanumeric characters of arbitrary text.  

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.  

 

1. 
   
2.  
   
3. 
   
4.  
   

 
 
 
Tips and Tricks
  

• Use care in where you place your brand image on the QR code image, there are required areas within the QR code  that you cannot cover up.

• Use a URL shortening service - keep your payload as small as possible.

• The higher you set the CHLD parm, the larger your brand image can be. 

• Use transparent backgrounds for irregularly shaped images.

• Rigorously test  your new QR code image with different smart phones and bar-code readers.  All phones and readers are not created equal! 

 
 
 
 
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.

 

https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/branding_a_quick_response_code_qr_code_with_a_custom_logo47?lang=zh