Implementing Microsoft Tags

By on 5-18-2011 in Articles and Ramblings, How to do Stuff

Implementing Microsoft Tags

In an effort to replace standard bar codes, Microsoft introduced the Microsoft Tag, using colored triangles instead of the ugly bar pattern of the QR code. One of the advantages of the Tag is the support it receives from Microsoft. Users get all the research and data needed to implement the tag, as well as a means of creating and tracking results all within one site. Visit tag.microsoft.com to open an account and start tagging!

A lot of the info on Microsoft’s Tag site can be a bit overwhelming for many people. My goal with this article is to sum up most of the information on Microsoft’s site so that you get exactly what you need in order to quickly implement the tag on any media you choose. I have also included this quick reference guide that you can download for your convenience.

What is a Microsoft Tag and what can it do?
The Microsoft Tag is a code (like a bar code) placed within a video, website, or printed product. It can be generated in color or black/white. When the code or tag is scanned from a smart phone, it will direct you to a specific URL, V-Card (contact information that loads to your phone’s contacts), Free Text, App Download or phone number to dial.

Quick and Easy Guide for Using the Microsoft Tag:
1. Go to tag.microsoft.com and open an account. You can use your msn/hotmail account if you have one.
2. Click on “Create a Tag”
3. Fill out the necessary data for the tag including the tag title, type, start date, end date, and URL information depending on the tag type you have chosen. Once complete, save your tag.

tag form, microsoft tag form,

Sample of Tag Form


4. Your new tag should now appear as a line item within a window. Click on the bar code icon under “Render”. This will pull up another window where you can select the file type, tag size, an option for black/white tag, and a selection of tag templates including the “custom” option.

Render microsoft tag, render tag,

Render Window


5. For a quick and easy tag:

  • Choose a file type (I prefer using .pdf for print media, and .png for all other media)
  • Select the size (the default size is set to the minimum size)
  • Finally, choose a template option. Choose one with the download instructions, so you don’t have to worry about including instructions manually(not recommended for advanced users)
  • Click on “Render” and the file will be downloaded to your hard drive. Now you can use the file in your layout or video.
  • 6. To create a custom tag:

  • Download a .pdf version of the tag and open the file in Adobe Illustrator
  • Keep the tag in one layer and put your background image in another layer(make sure your tag layer is on top)
  • Adjust background as needed and save file
  • Import the .pdf file into InDesign to use in print layouts, or you can open the .pdf in photoshop if you need to convert to a different file type to use in other mediums
  • Here are a couple of custom black/white tags I created for Raz’s Attic:

    microsoft tag, custom tag, black and whitecustom tag, microsoft,

    Best Practices:
    1. Be sure to let the user know what the tag is and where to download the scanner. Include the download URL adjacent to the tag: http://gettag.mobi
    2. Do not place your logo adjacent to the tag. Microsoft frowns upon third party branding.
    3. Do not position text or other markings in the white border of the tag.
    Note: The width of white space around the tag is equal to the height of the bottom black bar of the tag.
    4. If tag is used as part of a video, the tag download info must be present at the beginning of the video content. The tag URL must be displayed as part of the video.
    5. Be sure to use a vector version of the tag so it can be scaled as needed without a loss of resolution.
    6. When customizing, the white boxes on the sides cannot be altered in any way.

    Microsoft Tag Specs:

  • Color Tag – minimum size of 3/4″ x 3/4″ (includes white border)
  • Black and white Tag – minimum size of 7/8″ x 7/8″ (includes white border)
  • Custom Tags -minimum of 1.25″ x 1.25″ (includes white border)
  • Minimum size on monitor display should be 54px x 54px at 120ppi
  • Further Recommendations:

  • I prefer to never use the color bar code. One of the most ridiculous features of this new code is adding color to the bar code. The color of the code must be a certain hue and must maintain a certain range of brightness and saturation. This makes the color code far more prone to errors due to room lighting and print errors. For example – have you ever seen a poster damaged by the sun? Most of the color has been washed out and the poster looks blueish in color. The Microsoft Tag would be unreadable in this environment. Don’t risk using the color version. Use the black/white version, and customize with a color background if preferred.

  • I personally do not like the standard template that displays the download instructions. It doesn’t tell the reader what the tag is, it just gives a URL. Many users go to the app store for all their apps. Without telling a user what the tag is, they don’t know what to search for in the app store. Be sure you identify “Microsoft Tag” in your instructions.

    Download a quick reference guide here:


  • Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/47/7469547/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273