Setting "Home Screen" icon name for mobile Safari

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>?

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

For iOS:

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

For Android:

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

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+.

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>

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.

For iOS 6, use Maarteen's solution. For compatibility with iOS 5, you can also change the title using JS:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)
    || navigator.userAgent.match(/iPad/i)) 
{
    document.title = "Short Title";
}

Probably best to attach this to body onload using JQuery.

You can refer below URL for setting icon and name : https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

In head add below code :

<link rel="apple-touch-icon" href="/custom_icon.png"> // For icon
<meta name="apple-mobile-web-app-title" content="Short name"> // For name

I think safari will not allow you to make any page your home page at the end there is no use of making any search engine your home page