iTouch Home Screen Short Title


Also available for download on Studio Hyperset‘s Google code project site.

Using the following meta link, developers can instruct iPhones, iPads, and iPods to display a custom 60×60 image whenever a user adds a site or web app to his/her home screen:

<link rel="apple-touch-icon" href="relative or absolute url to 60x60 icon goes here" />

This is well known.

However, I’ve found myself frustrated that developers don’t have similar control over the home screen icon’s title. Without this ability, titles longer than 16 characters (including spaces) risk looking unprofessional by default.

For example, when setting up a home screen icon link, here’s how the hyper/boʊl/e homepage’s title looks, to an iPhone user, by default:

Dissatisfied, I wrote this simple JavaScript function as a quick fix:

if( navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
) {
document.title = "Short Title Here"; // 16 characters or fewer (including spaces)

Just save that function in a .js file, upload it to your server, and insert the following into the <head> section of your site/page where “url path to script” is the relative/absolute URL path to the script on your server:

<script type="text/javascript" src="url path to script"></script>

Of course, you could also insert the function directly into the <head> section of your site between two <script></script> tags.

When the function detects an iTouch user agent (iPhone, iPad, or iPhone), it loads a unique, 16 characters-or-fewer “short title.” If that user adds the site or mobile app to his/her home screen, the custom title will automatically appear in the title field. Using CMS/PHP/&tc. conditionals, developers can also use this function to customize iTouch home screen titles for individual sections and pages as well as for sites and web apps at-large.

Here’s how the title of the hyper/boʊl/e homepage looks to an iPhone user after incorporating the fix:

To encode SH’s witch house-y mho (ʊ) into the script, I used the character’s Java hex code preceded by a reverse solidus ():

if( navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
) {
document.title = "SH h/u028A/e";

This outputs “h/ʊ/e” in both the mobile page title and home screen web app.

To find a character’s hex code, consult this table.


Build great relationships with your customers and teammates

Download this eBook

    Learn how effective communication systems can help you build great relationships with customers and teammates.

Quimby Melton


Quimby is the founder and president of Studio Hyperset. He started Studio Hyperset in 2006 after studying Transatlantic literature and culture, new media, and humanities computing at the Universities of Georgia (AB, 00) and Nevada, Las Vegas (MA, 03; PhD, 08). He has a background in literary studies, media production, front-end development, and project management. His current primary duties involve helping clients frame solutions that meet their needs; scoping and managing Studio Hyperset's growth strategy and business development pipeline; finding and developing talent; and, most importantly, supporting the SH team.