A QR code (or ‘Quick Response Code’) is a machine-readable optical label in the form of a matrix bar-code.
Smart-phones easily recognize and read such 2 dimensional bar-codes. QR codes may contain many kind of data: raw text but also internet address, GPS position, phone call, sms message, email and even geographic position on earth.
Some of these formatted contents may trigger events on smart-phones, like activating your web browser with a predefined internet address or pre-filling an email for you.
1.1 QR Code Elements
QR codes usually consists of black squares distributed on a squared grid.
But it’s also possible to look at it from a new perspective.
These severe-looking squares can come in a variety of patterns and colors in order to be more discreet and visually more pleasant.
To achieve this, lets separate the various elements that make up a QR code.
First, as we move on from a black and white square world to a more graphic and colorful one, we will now talk about light and dark elements, targets, dots and logo.
Think of it as a safe quiet zone around and beneath the QR code, of uniform color. This is recommended for a safe QR code scanning and decoding.
Your background may take different forms. Also, depending of the image you place your QR code on, you may decide to have a more or less visible background – or even no background at all, depending of your ground image.
Targets are sets of concentric strips alternately dark and light. Those strips are usually squared but can adopt many patterns.
Why target? Because they’re used as finder elements, as well as they help to define the position, orientation and alignment of the matrix bar-code. Broadly speaking, they do not contain data but are safeguards to locate and read the QR code data.
QR codes always have 3 big targets and one (or more, depending on the quantity of data) small target. Targets have 3 concentric stripes: dark-light-dark. Big targets may show an additional light strip as they are located near the edge and QR codes need a light quite zone for optimal decoding. We need some minimal contrast to have the target pattern recognized.
Targets can take many different forms, like:
With the dots, you’re at the heart of the QR codes’ content. The positions of the dots will determine the technical parameters as well as the encoded content of your QR code.
Dark dots usually represent the data. Light dots help recognize dark dots, especially in case the background image is also dark or there are dark spots. We need some minimal contrast to have the dots pattern recognized.
Dots can take many different forms. Some examples:
A QR code can host an extra-layer for you to add a logo or a small image over it.
A logo image can overlap a small portion of a QR code. Don’t make it too large as the QR code won’t be readable anymore. Also, a logo image must never hide a target element! Check our blog on how to add a logo to a QR code and what to avoid.
Want to know more? Check our logo tools and functionalities.
This is the upper part of the QRcodeLab online QR code generator GUI (graphical user interface)!
Here you’ll find, from left to right:
- access to a management panel on the left part of the screen dedicated to user access and data, as well as the account subscriptions.
- a valid replica of your QR code at size 1:1 (i.e. at the scale of 1 dot for 1 screen pixel). Click on it to display details about your QR code!
- a button to check if the QR code is readable.
- access to a tools panel on the right part of the screen to edit QR codes.
2.1 QR Code Replica
A click on the QR code replica will display detailed information about your QR code type and content.
Please note the QR code content is locked in demo mode.
2.2 QR Code Check Button
This button widget performs a readability check of your QR code with the current parameters and scaling. An emoticon will display the result, positive (green) or negative (red).
Depending on the size of your image and QR code, this check can take a while (progress bar widget while working, stop button to interrupt the check process).
3 Left Panel
This sliding panel gives access to a set tools related to the user and related subscriptions.
Appearance may change depending on if you’re logged in or not.
- Upper part of the panel (in blue): will display a pop-up with detailed information about your subscription. In demo mode as well as with a registered free plan, downloads are unlimited but some limitations may apply: in demo mode you can’t change the content of the QR code, in free plan a small ad shows up alongside the QR code. Please refer to our pricing.
- Login: self explaining, use this interface to log into your QR generator account (if you have one). Otherwise, just read below.
- Sign Up: easily create your QRcodeLab account. We’ll ask only for an email and password. Being a registered user will unlock the QR code content editing tool.
- Reset Password: manage your credential if you lost your password. You’ll receive an email in minutes with a link. Check your spam box if you don’t receive an email.
- Subscriptions: gives you access to the various QRcodeLab paid plans you may sign up for. This option is accessible to registered users. The QR code content is editable only with a valid subscription plan. See details below.
- Config File: tools to save your work, as a configuration file, on your computer device. You can also upload a configuration file be it a local file stored on your device or an example from a gallery we provide. This feature is unlocked for registered users, even with no valid subscription plan.
- Dynamic QR: the place to review and manage your collection of dynamic and tracking codes. You’ll be able to edit, pause, delete your tracking codes and access the analytics dashboards.
- Downloads: this is where to recover the last images or configuration files you did. Works only for your current user session. We store the images as well as the configuration files you chose to download in the browser cache memory. This memory is deleted when you log out or if you quit your browser.
- Quit / Logout & Quit: use this menu to logout and quit the QRcodeLab online QR code generator.
- Request Support: anything going wrong? Use this link to get in touch with our support team, we’ll react asap!
Once registered and log in the application, you have access to this menu entry. It’s about the different plans you can choose from to generate qr codes and qr images at your convenience:
- Subscriptions: a choice of different subscription plans.
- Quantity: buy additional QR codes units, you set the quantity. No expiry date, they remain valid forever.
Being registered but without a valid subscription plan or under a Free Plan, you can test and download your image compositions as much as you want. Please note that some limitations apply in such case: the image size is capped at 1024 pixels, a small add shows up next to the QR code, and dynamic/tracking codes are disabled.
3.1.1 Subscription Plan
You can choose between several plans with different image resolutions, from 1024 up to 4096 pixels. These are the maximum image size you can process with your plan. All plans are bundled with a 10 QR code credit.
Your active plan is displayed in green. Feel free to downgrade or upgrade your plan whenever you wish. A downgrade will apply at the end of the billing period while an upgrade applies immediately, its price being prorated according to the end of the current billing period.
You’re free to cancel any paid plan anytime by switching to ‘Free Plan’. In such a case the cancel is immediate.
When running on a registered free plan you’re still able to edit the content of your QR code and download your image compositions but a watermark will display alongside and dynamic/tracking codes are disabled. Any such previous code will be put on pause. You will find them back in case you return to a paid subscription. There’s no time limit for a free plan. Upgrade to a paid plan to recover all the features.
3.1.2 Quantity Plan
In case you end with no more QR codes left, you can subscribe to a Quantity Plan.
Simply choose how much QR codes you want and click on the ‘Proceed’ button to check out.
This is not a recurring plan and the quantities you buy will remain valid until they are all consumed.
Price is per QR code, at a decreasing rate with a minimum quantity of 5 units.
3.2 Config File
Once registered and log in the application, access to this menu entry is unlocked, so you can start working with configurations files.
A configuration file stores all the elements and parameters necessary for the design of a QR code or a QR image: the content of the QR code, the parameters of its components, its position and orientation including the 3D effects, the logo with its own settings as well as the associated ground image.
You can download and upload such a file and/or share it with other users of the QRcodeLab QR generator. We also provide a gallery of examples for your inspiration, which you can choose to use.
This entry displays a standard pop-up window to download a file from your device.
Get access to a gallery of sample configuration files through this menu entry. Click on any image to load the corresponding configuration.
Once the process is complete, an exact copy of what you chose shows up in your viewing area, which you can then modify at your convenience.
Well… make sure to regularly save your work and your graphic compositions so that you don’t lose your work if something goes wrong. Also, this allows you to resume your work later in case of an interruption. You may as well choose to share it with other users of the application.
A list of configuration files is provided, showing all the configurations saved during your working session, including the latest one. They are sorted in date order, from the most recent to the oldest. Just click on the download button to create a local copy of your work on your device.
3.3 Dynamic QR
The dynamic qr code menu entry is available if you have a currently valid paid subscription. You’ll get access to a management console for your dynamic codes, along with a set of associated functions.
The upper part of the pop-up window displays a search field to narrow down the list of dynamic codes. On the right side a gauge displays the amount of dynamic codes still available in your subscription.
Dynamic codes are listed from newest to oldest. For each code the ‘Id’ and ‘Final URL’ values are active links for you to check the redirection process and the final destination. On the right side you’ll find 4 buttons to manage your codes:
- Edit: allows you to change the title and the destination address of your code.
- Pause: to suspend your dynamic code. Access to the final destination is no longer available and data is no more collected. You can choose to resume at a later time.
- Delete: well… it removes the dynamic code with no way back, including the associated statistical data.
- Analytics: this one opens a dashboard for a visual display of the dynamic code’s statistical data. Choose a time frame and filter the dashboard by anything you click on. The top graph displays the following dimensions : unique visitors, page views, bounce rate (% of sessions with only a single page view), and visit duration. You can break down the data by months, weeks, days and hours according to the time frame selected. The following graphs ‘Top Sources’ and ‘Top pages’ are limited to the final URL of the dynamic code. ‘Location’ and ‘Devices’ graphs give insights into the geographical origin (country, region, city) and the type of device (by screen size, web browser or device operating system) of who scans your dynamic/tracking code.
In the event you choose to downgrade your subscription, or even to switch to free mode, all or part of your dynamic codes could be disabled. This is because each subscription handles different quantities of dynamic codes, and the free mode does not. In such a case, the excess codes will be paused (not deleted) and the current data kept. This mandatory procedure is applied by order from the oldest, and the user can refine this choice later within the subscription boundaries.
This menu entry gives access to an interface for managing the files generated in the current work session. These can be qr images (tab ‘IMAGES’ on the left) or configuration files (tab ‘CONFIGS’ on the right). The files are listed from most recent to oldest. The internal name of each file reflects the date it was created.
These files are temporarily saved in the internal memory of the web browser (or the App) and disappear when you log out, close the web page or quit the browser (or the App). For as long as you stay in your working session, you have access to your files. We do not store any of your documents on our servers.
- receiving a copy of your data, and
- deleting your account.
3.5.1 Send Me My Data
Click on this link if you wish to receive a copy of your QRcodeLab online QR code generator data.
You’ll shortly receive an email with a readable extract of our databases in reference to you.
3.5.2 Delete My Account
Click on this link if you wish to delete your QRcodeLab online QR code generator account and thus terminate any kind of relation with. Don’t forget to confirm in the pop-up window.
It won’t be the same without you!
Your account will be immediately deleted along and any paid plan also immediately disabled ; all your personal data will be wiped out within 24hours. No recovery possible.
Miss us already? So do we! In any case you’ll be able to reopen an account with the same email once the delete procedure has been completed.
4 Viewing Area
This zone displays the chosen background image along with the QR code displayed over it.
In case the image is larger than your screen, you can scroll vertically and horizontally to display the proper part of your image. The maximum size of your image depends on your subscription plan.
How to scroll:
- use the scroll bars on the right and lower side of the image display zone, if displayed
- use your mouse wheel for vertical scrolling, or shift-key +scroll for horizontal scrolling
- drag the image with your mouse or pointer.
Click over the QR code to select it. You can also drag the QR code to any location over the background image. Use the QR code handles to scale or rotate it.
5 Right Panel (Tools Panel)
You are now getting at the heart of our app. All the design tools are located in this panel.
We’ll make a top-down description.
5.1 Interaction Modes
The Qrcodelab online QR code generator provides three user levels for a better working experience and spare your time:
- ‘Dobby’ (simpler interface, basic controls),
- ‘Padawan’ (intermediate level), or
- ‘Jedi’ (full control on all settings).
Switch from one mode to another to accelerate your design process.
First, use the ‘Dobby’ mode to define your settings globally. Then dive more into details with the ‘Padawan’ mode and finish, if needed, with the advanced ‘Jedi’ mode.
These interaction levels affect the scope of the tools in the tools panel.
5.2 QR Content
This drop-down widget will let you define the content of your QR code. Depending on the length of your data, the QR code appearance and size may change.
Our QRcodeLab online QR code generator allows you to define many kind of content:
- Text: raw text, write down whatever you want!
- URL: this is an internet address. Not only a website address but also the trailing path and even the tracking code (if you plan to monitor a publishing campaign). Depending on the device on which your code will be read, this may trigger an event that will open a web browser with the url you defined.
- SMS: this stands for ‘short message service’. You’ll be able to define a destination phone number and a short text message. Depending on the device on which your code will be read, this may trigger an event that will open a messaging app with your predefined data.
- Call: use this option to drive someone to initiate call. Depending on the device on which your code will be read, this may trigger an event that will open the telephone app, pre-dialing the phone number you defined.
- Email: here you can prepare an email with the target email address, a subject line and a text message. Depending on the device on which your code will be read, this may trigger an event that will open an email application with the predefined email.
- Geographic: specify a geographical position with latitude, longitude and altitude. Depending on the device on which your code will be read, this may trigger an event that will open a map application spotting your predefined location.
- Google Maps: specify a Google Maps location. Use the provided link and follow instructions to get the link location and then paste it in the URL field.
- Wi-Fi: encode a Wi-Fi network ID, authentication method and credential into a QR code.
- Google Play Store: link to an android app on Google website. Use the provided link to search for the desired app and then copy/paste the app link in the URL field.
- Apple Play Store: link to an IOS app on Apple website.
QR code contents are editable only if you’re authenticated and have a valid subscription plan!
5.2.1 Content for Dynamic QR Code
Some specific kind of QR code content may show up a toggle switch to activate the dynamic and tracking code functionalities, these are:
- Web addresses (URL)
- Google Maps
- Google Play Store
- Apple App Store
In such a case a ‘Dyn QR’ entry shows up, and you may choose to generate a dynamic and tracking QR code associated with a short URL. Simply turn on the toggle switch and some additional data will appear below:
- Title: a name has been set for your new dynamic/tracking code. By default, it’s ‘New dyn QR’. It can be modified later in the dynamic QR management console (refer to the matching entry of the left interface panel).
- Id: it’s a code that’s unique, made up of a series of numbers and letters that you can’t modify. It’s a subset of yor short URL, like this example: ‘https://s.dynqr.co/a9m0z’
- Target: the data you provided has been moved to this field and replaced by a unique short URL. Like the tile, it’s editable in the management console.
Eventually, the ‘List’ button allows to reach your collection of dynamic/tracking codes in case you wish to work with an existing one.
Note that any code labeled ‘New’ for the purpose of creating a QR code is not yet editable. You will be able to do so in the dynamic QR management panel once the QR image is generated.
Be sure to click on the ‘Use’ button to validate your choice.
5.3 Basic Mode - Dobby
This user mode is the simplest way to define your QR code design.
All elements are defined in a single folding area.
5.3.1 Dots & Targets
- Two color widgets to define the dark and light colors of both the QR code dots and the targets.
- A drop-down menu to set the outline of both the dark and light dots.
- And another drop-down menu to set the aspect of all the targets, whether big or small.
- A slider widget to specify to add some blurring effect to all QR code elements.
5.4 Intermediate Mode - Padawan
This is the QRcodeLab online QR code generator intermediate interaction mode. The set-up of dots and targets are performed in separate folding zones with more parameters for a more precise control of your QR code design.
All the widgets in this section apply globally to both dark and light dots.
- Two color widgets to define the dark and light colors of the dots.
- A drop-down menu to set the outline of the dots.
A set of 4 slider widgets to apply some effects to the dots, both dark and light:
- randomize rotation,
- blurring, to smooth the dots edges.
All the widgets in this section apply both to big and small targets.
- Two color widgets to define the dark and light colors of the targets.
- A drop-down menu to set the aspect of the targets. Some form substitutions may apply for a subset of small targets.
- Two sliders to rotate the targets, big and small.
- A slider widget to apply a blurring effect on the targets edges.
5.5 Full Control Mode - Jedi
This is the full control interaction mode. The set-up of dark dots, light dots, big targets and small targets are performed in separate folding areas with all available parameters!
5.5.1 Dark Dots
The widgets in this section apply exclusively to dark dots.
- A color widget to define the color of the dots.
- A drop-down menu to set the outline of the dots.
- A toggle button to flip the dot (horizontal symmetry).
A set of 4 slider widgets to apply some effects to the dots:
- randomize rotation,
- blurring, to smooth only the dark dots edges.
5.5.2 Light Dots
Same widgets as in previous section but applies only to light dots!
5.5.3 Big Targets
All the widgets in this section apply globally to the three big targets.
- Two color widgets to define the dark and light colors of the targets.
- A drop-down menu to set the aspect of the targets.
- Three sliders to rotate individually each of the big targets.
- A slider widget to apply a blurring effect on the big targets edges.
5.5.4 Small Targets
Same widgets as in previous section but applies only to small targets.
This section is about geometric transformations applied to the QR codes.
Use these tools to improve integration of QR codes in your images.
The ‘Reset’ button will cancel any existing geometric deformation.
Shear effect with two sliders for vertical and horizontal values (in degree of angle). This is immediately applied to the QR code.
Note that high shear values may compromise the QR code decoding!
Perspective: the ‘Open’ button will unlock a pop-up window dedicated to 3D transformation. You’ll notice four handles that allow to simulate a perspective effect. As a convenience, a light red square is displayed to get a better idea of the perspective transformation.
You can select and move each handle with your mouse or fine tune the position with the keyboard arrows (Ctrl+arrow will amplify the displacement). You can also move the QR code the same way, once selected.
Choose the proper option in the NavBar to validate the transformation or not (‘Close’ / ‘Done’). The ‘Reset’ button will reverse the QR code to its initial size and position.
You can fine tune the graphical integration of your QR code on a perspective surface in your images by adjusting the QR code background color opacity level, even to full transparency.
Big perspective deformations may compromise the QR code decoding!
This widget may be deactivated depending on your browser.
Check our FAQ for more details.
Use this accordion to set the QR code background characteristics.
- A color widget to define the background color.
- A drop-down menu to define the background shape.
- A slider widget to play with the blurring level of the background edges.
A toggle switch at the top of the accordion allows to disable/enable the background for the QR code.
Use the slider widget in this accordion to preview a scaled down version of your image.
A crop-free icon placed at the top of the accordion allows to directly scale the view so that the image is not clipped.
Scaling the view will allow to get a full overview of your work. But, most importantly, in the case where the final representation of your work will be smaller than the one displayed on the screen, it may be useful to check the readability of a scaled down version of your QR code!
5.9 Logo Tools
Click on this button to access a pop-up window where you’ll be able to choose, upload and edit a logo image over your QR code.
TIP: click directly on the QR code logo image in the viewing area to directly access the logo pop-up window.
Our QR code generator can manage an extra-layer for you to add a logo or small image over it. An image in such layer can overlap a small portion of the QR code.
Don’t make it too large as the QR code won’t be readable anymore. Note also that a logo image must never hide a QR code target element.
Use the collapsible cross button to upload a graphic element. It can be either a graphic pattern (those of the qr dots), or a useful logo, or any image of your choice (jpg, png or svg format).
Once a logo item has been uploaded, a ‘Tools’ button is unlocked giving access to several submenus, depending on the king of item (raster image or svg vector image).
Each sub-menu matches a visual characteristic of the logo image.
A switch allows to enable/disable each characteristic:
- ‘Image’: the uploaded image itself. You can adjust its opacity channel.
- ‘Foreground Tint’: define a color over the logo image. Doesn’t apply to transparent areas in images.
- ‘Inner Tint’: in case of a predefined pattern or logo image, define a color for the inner areas of the logo image.
- ‘Edge’: tools to set the color and thickness of an edge border around the logo image. Doesn’t apply to transparent areas.
- ‘Background’: tools to set the characteristics of a background image for the logo, such as color, geometric form, size, rotation and blur effect.
For additional needs the bottom bar allows several actions through the following buttons:
- ‘Reset’: reverse the logo composition to its initial size and position
- ‘Center’: center the composition to the middle of the qr :code. Any rotation is also cancelled.
- ‘Delete’: will delete the current logo composition.
5.10 Ground Image
Click on this button to select and upload a background image. Choose between solid colors, useful standard backgrounds (‘Gallery’) or upload your own document (format jpg or png).
If you replace an existing image, the QR code parameters will be kept except for its position and the 3D effects applied.
Self explaining: restore all the QR code parameters to default values, place, size and rotation in the current image!
6 Bottom Bar
The links in this lower part of the QRcodeLab online QR code generator user interface are of general purpose and not linked to the user or the QR code itself.
6.1 Request Support
Any question or something going wrong with our online QR code generator? Click on our ‘Request Support’ link to get in touch with us!
6.2 Download Image
Use this button to retrieve your current image composition. A small sticker displays the remaining QR code credit balance.
You’ll be warned on two points:
- if the decoding of your QR code fails to pass the decoding test. You can still download it, but at your own risks.
- this will consume a credit in (one of) your subscriptions. QR code units from the subscription plan are allocated first, then units from the quantity plan.
Access to a pop-up window listing the last downloaded images and configuration files for you to save them again. Works only within the current user session as locally stored data using the browser cache are deleted at logout.