• Share
  • ?
  • Profiles ▼
  • Communities ▼
  • Apps ▼

Blogs

  • My Blogs
  • Public Blogs
  • My Updates
  • Administration
  • Log in to participate

▼ Tags

 

▼ Similar Entries

My Windws Path updat...

Blog: BigFix Releva...
brolly33 2700049USE
Updated
0 people like thisLikes 0
No CommentsComments 0

Another "form" of re...

Blog: BigFix Releva...
brolly33 2700049USE
Updated
0 people like thisLikes 0
No CommentsComments 0

Getting started with...

Blog: developerWork...
VishDev2018 50232PFTJ6
Updated
1 people likes thisLikes 1
No CommentsComments 0

Company Name or Publ...

Blog: BigFix Releva...
brolly33 2700049USE
Updated
0 people like thisLikes 0
No CommentsComments 0

November 1, 2018 at ...

Blog: BigFix Releva...
brolly33 2700049USE
Updated
0 people like thisLikes 0
CommentsComments 1

▼ Archive

  • December 2011
  • November 2011
  • October 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • January 2010
  • December 2009
  • November 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • April 2009
  • March 2009

▼ Blog Authors

design @ IBM developerWorks

View All Entries
Clicking the button causes a full page refresh. The user could go to the "Entry list" region to view the new content.) Entry list

Branding a Quick Response Code (QR Code) with a custom logo

bobleah 270000CN12 | | Tags:  code smart_device qr qrcode ‎ | 21 Comments ‎ | 65,872 Views
imageIn 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. 

 
<img style="position: absolute; top:200px; left:100px;" src="https://chart.googleapis.com/chart?chs=240x240&amp;chld=H&amp;cht=qr&amp;chl=http://ibm.co/fgA5LQ&amp;choe=UTF-8" alt="Bob Leah" />
 
<img style="position: absolute; top:270px; left:170px; height:95px; width:95px;"src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/bob.gif" />
 
<img style="position: absolute; top:375px; left:145px; height:20px; width:20px;" src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/dw-small.png" />

 
 
Tips and Tricks

image 
  • 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
 
image 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).
 
 
 
image 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.
  • Add a Comment Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry
Notify Other People
notification

Send Email Notification

+

Quarantine this entry

deleteEntry
duplicateEntry

Mark as Duplicate

  • Previous Entry
  • Main
  • Next Entry
Feed for Blog Entries | Feed for Blog Comments | Feed for Comments for this Entry