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) ||
navigator.userAgent.match(/iPad/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) ||
navigator.userAgent.match(/iPad/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.
