60

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

pilcrow
  • 56,591
  • 13
  • 94
  • 135

8 Answers8

214

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

Community
  • 1
  • 1
Maarten Wolzak
  • 2,651
  • 1
  • 19
  • 18
  • 3
    It appears this only works for iOS 6. It does not work on my iPhone 4S with iOS 5.1.1. – davidjb Feb 08 '13 at 01:35
  • 5
    @davidjb yes, that's what the answers says. Thanks for emphasizing. – Maarten Wolzak Mar 15 '13 at 12:05
  • I can't find this anywhere in the Apple Docs? Is there a source link? Is this still true for iOS8? – ProblemsOfSumit Oct 31 '14 at 09:53
  • 2
    @Sumit you're right, it's not in the docs. Being undocumented you should be prepared to go without it. But it still functions in iOS 8 & 8.1 – Maarten Wolzak Nov 05 '14 at 21:54
  • 1
    I've found this entry in the official docs where apple-mobile-web-app-title is documented: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html – cwap May 17 '17 at 08:26
20

For iOS:

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

For Android:

<meta name="application-name" content="Short name">
Dexter
  • 313
  • 2
  • 5
4

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

Community
  • 1
  • 1
davidjb
  • 8,247
  • 3
  • 32
  • 42
2

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>
qmega
  • 1,243
  • 9
  • 9
2

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 &#xFFFF; 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 &#xFFFF; 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 &#xFFFF; characters might be visible when viewed on non-iOS devices.

Phil
  • 1,288
  • 1
  • 10
  • 19
1

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.

NickG
  • 9,315
  • 16
  • 75
  • 115
1

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
hectk
  • 350
  • 1
  • 3
  • 11
0

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

Ahmad Ebrahim
  • 1