CODEWITHSUNDEEP
iphonesafariiconsmobile-safari
pilcrow
pilcrow

Reputation: 58589

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

Upvotes: 62

Views: 30942

Answers (8)

Ahmad Ebrahim
Ahmad Ebrahim

Reputation: 1

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

Upvotes: 0

Maarten Wolzak
Maarten Wolzak

Reputation: 2681

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

Upvotes: 215

hectk
hectk

Reputation: 350

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

Upvotes: 1

Dexter
Dexter

Reputation: 323

For iOS:

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

For Android:

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

Upvotes: 21

davidjb
davidjb

Reputation: 8727

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

Upvotes: 4

NickG
NickG

Reputation: 9812

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.

Upvotes: 1

Phil
Phil

Reputation: 1308

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.

Upvotes: 2

qmega
qmega

Reputation: 1241

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>

Upvotes: 2

Related Questions