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">
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+.
Source: StackOverflow