Take Your liveSite to the Next Level: Turn Your Bookmarks into Touch Icons

Apr.3.2013 / Other / 0 Comments

This is the second blog post in our “Take Your liveSite to the Next Level” Series.  In this episode, we take a look at how Touch icons can make it easy for your site visitors to bookmark your website as an icon on their portable device screen — right along side their apps!

Background

Mobile traffic to your website is increasing (we’ll talk more about this later in the series). As a result, the chances of your site viewers bookmarking a page on your website with their portable device is also increasing.

Standard websites have a nice standard for adding an image for browser bookmarks. They are called favicons and simply require adding an image to the root folder of your site.

Unfortunately, there is no such standard when it comes to portable devices. They often default to creating a screenshot of the web page being bookmarked that doesn’t necessarily provide the quick brand recognition you would like.

Setting Up Touch Icons for your Website

We have found a method for creating “Touch icons” which could be considered the favicons for portable devices. This method accounts for various generations of devices and works great for Apple devices and pretty well for Android.

Step 1: Create four different sizes of your icon
(Theses sizes accommodate for different generations of devices)

apple-touch-icon-144x144-precomposed.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png (This is 57x57 pixels)

The precomposed keyword keeps Apple from adding its own fancy effects to your icon. We prefer this method because sometimes the rounded corners, drop shadow or reflective shine can affect the visibility of your icon. If you remove “-precomposed” from your image names and HTML references then Apple will add these features for you by default.

Step 2: Upload these images to liveSite
We would suggest uploading these image files as “Design Files” but it’s really up to you as long as the images exist somewhere in your site within a Public Folder.

Step 3: Reference the new Touch icons in your HTML
You will want to add the following HTML to your “Additional Head Content” on every Page Style within your liveSite website:

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">

<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: This image is 57x57 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">

TIP: Don’t forget to include the code above in both your Desktop and Mobile Page Styles!

Steps to Add HTML to Your Page Styles:

• Log into your liveSite
• Click on the “Design” tab
• Click on “All Page Styles”
• Click on the Page Style you want to add the HTML to (start with your home page's page style)
• Click on the black “View Source” button in the button bar
• Copy / Paste the code above into the “Additional Head Content” field
• Click “Save & Return”
• Repeat the process for any other additional Page Styles you wish to enable Touch icons

Once you’ve completed steps 1-3 then go ahead and visit your website's home page with a portable device. Create a bookmark for a page and, if everything went as planned, your device should create an app icon on your device’s screen.

Try it for Yourself.

We've enabled Touch icons at https://livesite.com so if you bookmark our site, you can add our touch icon to your portable device screen, like this:

Bookmark Site	Add to Home Screen	Name the Icon	Icon Added!

In Conclusion

Adding Touch icons is a great way to add a visual reference to a bookmark for your website. It is also a great way to provide a branded icon for a web-based application. So while you have default icons for your main website, you might also consider creating different visual cues for web-based applications you develop with liveSite for your organization.

As we mentioned earlier, there is not a standard for adding touch icons that works across the board. Some Android devices prefer to use the favicon and simply ignore the touch icon code. There are also differing levels of support for the various browsers built for each OS.

Hopefully a standard will eventually emerge, but until then this method is the most effective way we’ve found to add these icons successfully.

If you'd like to receive our blog posts in your inbox, don't forget to join our mailing list.