Setting "Home Screen" icon name for mobile Safari

Question

By default, when "bookmarking" a website as an icon (by choosing to Add to Home Screen from within Safari's "+" menu), the icon name defaults to the page's <title>, truncated to 12 characters.

In much the same way that apple-touch-icon lets you specify your own iconified representation of the page, is there a way for the webpage to specify a default icon name other than its <title>?

Solution 1

In iOS 6 this is solved with a meta tag:

<meta name="apple-mobile-web-app-title" content="Short name">

As cwap rightly commented: It's now official documentation. Here's all the info on setting meta tags for web apps: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Solution 2

For iOS:

<meta name="apple-mobile-web-app-title" content="Short name">

For Android:

<meta name="application-name" content="Short name">

Solution 3

For better cross-compatibility on all versions of iOS, you could use a combination of answers (inspired by https://stackoverflow.com/a/13838563/1048705):

Place this into your document for iOS 6+:

<meta name="apple-mobile-web-app-title" content="Short name">

and use this tag's content for the title for other iOS versions that don't support the tag directly:

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
    document.title = document.getElementsByName('apple-mobile-web-app-title')[0].content;
}

Note that the JavaScript will change the title for all iOS clients, including iOS 6+.

Solution 4

There doesn't seem to be any way to do this with meta tags or anything like that. My suggestion would be to use server-side logic to give iPhones a different title. For example, in php you could do something like this:

<title><?php echo strpos($_SERVER['HTTP_USER_AGENT'], 'iP')?'iDevice title':'normal title'; ?></title>

Solution 5

This is how I worked around it for my fictional client, "Super Epic Resort Hotels", which abbreviated name "SERH" can fit the iOS home screen icon name limit. (By the way, the limit seems to be based both on character count (13 on my iPad) and the rendered width.)

Pad the name with  characters until it reaches the limit. In my case, 9 seems to be sufficient but you can always add more just in case.

<title>SERH&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF; - Super Epic Resort Hotels</title>

When adding the page to the home screen, Safari suggests the name:

SERH

which is actaully

SERH￿￿￿￿￿￿￿￿￿

but the user won't notice them, as the  characters are invisible on iOS and take up no space, until the user tries to backspace the name. In my case, the user has to backspace 9 times before he/she can backspace "SERH".

Edit: Use this in conjunction with qmega's solution above, as the  characters might be visible when viewed on non-iOS devices.

View more solutions