Have you ever wanted to allow your users to visit your SharePoint site from their mobile device with a simple touch of a custom home screen icon? This blog will cover three simple steps to accomplish this task for users of iPhones or iPads.
Step 1: The first step is to create your custom icon. The size of the icon you will need to create will vary depending on the type of device you are targeting. For example, for an iPhone 4 you will need a 114px by 114px image. For an iPad, it should optimally be 72px by 72px, and all other devices such as iPhone5 use 57px by 57px. The easiest solution (and the one I used) is to create an icon targeting one device, and make sure that it has a resolution of 72dpi. Other devices will scale the image up or down as needed. Save the icon as a JPEG or PNG.
Step 2: Upload your custom icon. Depending on the security settings of your site, you may be able to upload the icon to one of your document libraries. You will need to ensure that all of your users have access to the library you have uploaded your custom icon to. For the particular customer I was assisting with this, their site was an internal SharePoint site with external access through TMG where their users were asked to authenticate. Therefore, placing the icon in a location that was accessible to all authenticated users was the easiest option. You can also place your icon in the _layouts directory if you would like to use the same custom icon across all site collections within your farm. Be sure that you place it in this location on all of your Web Front Ends.
Step 3: This step requires access to SharePoint Designer. You will need to edit your default master page and add three lines of code to the header section. Before making any edits to your master page, it is always a good idea to make a backup copy of it. You can always reset to site definition, but you can never be too careful! Here is the code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <link rel="apple-touch-icon" href="http://URLToCustomIcon.jpg" />
Remember to place these lines of code within the <head> section of your master page. I placed mine right after the last meta tag. The above code can be copied and pasted, simply changing the href in bold to the URL to where your custom icon is located. Be sure to use the full URL of your custom icon unless it is located in a document library or in your _layouts directory.
Note: I did some research to gain an understanding of the viewport line of code. For reference, this line of code is what is telling the browser to scale your page so that it fits nicely on your iPhone or iPad. The meanings of each field are as follows:
width=device-width: Fits the page to the width of your device.
initial-scale=1.0: The scaling when first loading up the page on your device.
maximum scale=1.0: The maximum allowed scaling.
user-scalable=1: Allows the user to zoom in and out on their mobile device. You can use values of yes or no or 1 or 0 for this field.
Once you have placed the three lines of code into your default master page and changed the href to point to the location of your custom icon, save, then check in and approve your master page. Now, for the fun part: grab your phone and test it out! Here are some screenshots from an iPhone5 (iOS 7):
A screenshot of my Test Site on my VM:
Tap the Actions menu button, then select the ‘Add to Home Screen’ icon:
You should then see your custom icon on the ‘Add to Home’ screen:
I know, the icon isn’t pretty, unless you really love the color blue, but I was more concerned with how this worked! Also notice that by default iOS automatically resizes the icon and rounds the edges to match the standard icon shape. It will also apply a gloss looking effect to it (unless you are running iOS 7). You can now give your icon a name and then tap on the Add button to place it on your home screen. See the screenshots below of the Home Screen icon on an iPhone5 running iOS 6 versus iOS 7 (Notice the gloss effect is not applied to the iPhone running iOS 7):
iOS 6 Home Screen Icon
iOS 7 Home Screen Icon
As you can see, the steps to accomplish adding a custom icon are actually quite simple and will make your SharePoint site look much more professional. Hopefully your custom icon will be a bit more creative than mine! In addition, your user’s now have the convenience of being able to quickly access your site right from the home screen of their phone.