Creating an IOS WebApp icon for your Mobile Libguide

We’re in the final testing stages of launching our mobile website which is built on CampusGuides. It’s been an exciting project!

One of the little details that I wanted to get right was an app icon for our LibGuides system. Right now, Springshare does not allow you to modify the mobile settings on a group basis, like you can with the desktop version. However we can create a mobile icon for the whole of your LibGuide system.

Here’s how to do it.

Create an icon for your system. Something small, with little to no text, and sized around 57×57 for the iPhone.

 

This is ours. It’s 57×51 pixels, a transparent background PNG file.

Now, upload this file somewhere in your LibGuides system. I have a special LibGuide for our Library Brand Book, so this is just one more entry in my official images list.

Copy the link to the file name.

In your Admin page go to Systems Settings > Mobile Settings

In the ‘Custom <Head> Code’ field paste this string

<link rel=”apple-touch-icon” href=”[LINK TO YOUR IMAGE]”/>

IOS automatically rounds the corners of the image and adds the gloss to it.

 

 

If you have some fancy photoshop skills, you can create your own custom image with rounded corners and a look of your choice, in that case the META tag will look like this

<link rel=”apple-touch-icon-precomposed” href=”[LINK TO YOUR IMAGE]”/>

This is one of those easy touches that really make your LibGuide system look professional.

Advertisements

One Response

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: