The HTML tag :
<link rel="apple-touch-icon" href="/customIcon.png"/>
seems to picks up the text it will use from the first 12 characters of the HTML tag:
<title>123456789012...</title>
when you select the 'Add to Home' option in the Safari browser. However only the first 9 character are displayed in the iPhone's desktop. If more than 9 are in the text dialog box, the result is a '...' name on the desktop of the iPhone. The <title> tag often has more than 9 or 12 characters to name the web page.
Is there a way to keep the web page's <title> attribute intact and long while specifying a 9 character name of the desktop icon on the iPhone?
I have tried the:
title="12345689" attribute in the <link rel> attribute with no luck.
Thanks in advance!
You can't increase the number of characters shown under the icon but you can get it to default to something other than whats in the <title> of the page with this meta tag.
<meta name="apple-mobile-web-app-title" content="New Title">
I think this may only have support from iOS 6 up though.
No, there is no way you can lengthen the title on the homescreen. However, native iOS Apps cannot do this either if it's any consolation.
Related
Alright, so I set up a website using Github a while ago. I use it as a showcase for programming projects I'm working on, but that's beside the point. For a while now I've been trying to add an icon to my website, and for the life of me I can't figure out how. Help please.
If by icon you mean the image you see on the browser tab 32x32 pixels, that is usually in a format called Favicon.
You just need the image of your icon in favicon format (google how to convert an image to favicon and you will find websites that do this for you easily.), add it to your project and then add a tag on your hmtl head:
<head>
/* some style tags */
/* THE FOLLOWING IS YOUR 'ICON' */
<link rel="icon"
type="image/png"
href="./style/images/logo.favicon">
</head>
But this question should definitely not be under git tags. You did not mention why one should keep in mind that you are using github.
I'm practising on a mobile website but I'm encountering two problems.
On my iPhone I'm able to press the button down in the middle of the Safari Browser and use 'Add to homescreen' in order to place an 'app icon' on my iPhone screen between the other apps. When I press the icon of my site, it obviously redirects me to my website and (thanks to a javascript file) hides the browser navigation bars. Though, when I press an 'a href' link on the site, I'm being taken back to the safari browser to open it there.
I think this is because I wrote it like this:
And on my mobile, I'm accessing the site by an IP address.
Is there any way to solve this?
--
The other problem:
When I use 'add to homescreen' in Safari, I'm supposed to give it a name. It's automatically using my 'title' given in the HMTL file. But how am I supposed to give the app an icon? It's currently just using some sort of a screenshot of the website as the icon ..
iphone-app-icon-html-web-app-home-screen-icon
The iPhone Mobile Safari web browser recognizes a special HTML tag that lets you add an iPhone app icon to your HTML application. Here's the syntax that lets you add an iPhone app icon to your web app:
<link rel="apple-touch-icon" href="/my-app-icon.png" />
This HTML link tag with the apple-touch-icon in the REL field tells the iPhone Mobile Safari browser to use this icon as the app icon for your web app.
iPad and iPhone app icon pixel size
To support the higher-resolution iPhone 4, your iPhone app icon should be a 114 by 114 pixel icon. Older iPhones used 56x56 pixel icons (or possibly 57x57), and the iPad uses a 72x72 pixel icon, and the image you supply will be scaled down and work on all of these devices. Here's a quick summary:
iPhone 4 - 114x114 pixels
Older iPhone - 57x57 pixels
iPad (version 1) - 72x72 pixels
If you prefer a little more control of your app icon size, Apple's documentation shows the following examples:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.
Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.
The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).
You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.
I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?
It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
To add an icon:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
To have a startup image:
<link rel="apple-touch-startup-image" href="/startup.png">
To hide the navigation bar:
<meta name="apple-mobile-web-app-capable" content="yes" />
To change the status bar appearnace:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403)
To change the status bar appearnace on iOS 15:
<meta name="theme-color" content="#ecd96f">
Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.
I have created a webapp using all of the recommended link and meta tags for safari, eg.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="/startup.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />
However, my issue is if the startup.png or any of the apple-touch-icon image files are updated on the webserver, it doesn't seem like a user's iphone or ipod will retreive the updated file once it has been saved to their home screen (I'm guessing it's cached somehow or something). It works to remove the webapp from the home screen and re-add it. But is there a way to let the application know it needs to refresh these images without requiring the user to delete and re-add it?
It's been a few years since this question was asked/answered and I'm here to report that this is now possible!
In newer iterations of iOS, the Apple Touch Icon that is displayed on the homescreen is cached just like any other piece of content from the website. By simply changing the name of the image, it will force the homescreen shortcut to refresh the icon the next time the shortcut is launched.
However, to keep in line with Apple's naming conventions, you can simply append URL variables to the reference whenever you want the icon to be redownloaded and continue to call the image apple-touch-icon.png.
What I have done to automate this issue (in PHP) is append the last modified date/time to the image. For example:
<link rel="apple-touch-icon" href="apple-touch-icon.png?m=<?php echo filemtime('apple-touch-icon.png'); ?>" />
This outputs:
<link rel="apple-touch-icon" href="apple-touch-icon.png?m=1415832495" />
Now, you don't have to do anything but literally overwrite the image and everything else will happen automatically. When you change the image, the modified time changes and doesn't match what the user has in cache anymore, so it forces a new download. Simple!
OLD ANSWER: I've done a ton of research into this trying to find a way. Unfortunately, it is not possible. It needs to be removed and re-added to the home screen for the new icon to be used.
I just tested a theory on the Iphone 5 and Ipad 2, and it worked for both. Similar to the favicon, you can force the new favicon to pull by changing the href.
Instead of href="/apple-touch-icon.png" I used href="/apple-touch-icon.png?ver=1.1" and it pulled the new icon when the site was visited (without deleting and re-adding to home screen).
will just add my small "work around". Have been tryied all kind of corrections to my website to get the icon to show up correctly in my bookmarks on my own IPAD. Later found out that on apple products there newer visited my site before, ICON showed up fine. All my visits to my site was as http://mysitename(ref).dk but when I added http://www.mysitename(ref).dk the IPAD finally discovered this as a new website and the apple ICON was located and presented correctly in my bookmarks. :-)
Jacob
I've seen icons get updated, but I don't think it's possible to affect this update in any way. I've noticed the updated icons after the phone was rebooted, but I haven't look enough into it to say anything conclusive.
Within my webapp if i just change the startup.png file with a new one, the first time a reload the app from the home screen it shows the old image. Closing and reopening the app shows the new startup.png image. iOS 4.2.1.
By the way, the same apllies for the icon.
Removing and re-adding the webpage/webapp to the homescreen may not even suffice.
I just tried to
delete the bookmark from homescreen
reload the page in safari
add the bookmark to homescreen
==> it still shows the old icon it seems to have cached somewhere :(
After peeking at the SO source, I noticed this tag:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Which after a quick Google revealed an Apple "favicon" type thing for display on your homepage ("WebClip Bookmark" to be exact).
The only other one that jumps to mind is the:
<input type="search" results="5"/>
(source: alexking.org)
This type="search" causes the field to "inherit" the Apple search icon, and the optional results="x" enables a history of "x" keywords to be maintained.
I'm therefore wondering, what other Apple/Safari (iPhone/iPod Touch) specific HTML tags and attributes are out there that I'm not aware of! Curious minds need to know!
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
Allows you to set the width, height and scale values
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Set the status bar style, pretty self explanatory.
<meta name="apple-mobile-web-app-capable" content="yes" />
As Marc mentioned above, and is explained in the daringfireball.net link, allows the webpage to be run in full-screen mode, as opposed to through safari.
There's other various attributes that are supported and are documented here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Thought I'd add my own answer with some new things I've seen crop up.
1.) There's an option for providing a higher definition iPhone 4 retina display icon
<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>
2.) If you find the default glossy overlay that iPhone/iPod/iPad places on app icons is too much, you can request to not have it added by adding "precomposed" to the rel attribute.
<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />
3.) You can make iPhone links for phone/sms texting directly do the desired action
Call us
Text us
4.) Not quite an HTML tag, but a handy option for toggling CSS based on orientation
<script type="text/javascript">
function orient(){
switch(window.orientation){
case 0:
document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90:
document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
5.) You can provide a special CSS stylesheet for iPhone 4's retina display which supports 4x as many pixels as the original.
<link rel="stylesheet" type="text/css" href="../iphone4.css"
media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Thanks to #Sarah Parmenter over on 24 ways for this added information.
A useful header tag for single-purpose webapps is apple-mobile-web-app-capable. When the user creates a home screen shortcut for the site, it will launch in 'fullscreen' mode, separate from the normal Mobile Safari application and without the URL bar or other chrome. If the site is nicely designed it can feel almost like a native iPhone app.
The above mentioned documentation has moved. These are the new locations.
Safari HTML Reference:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/
Safari Web Content Guide:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/
#scunliffe I took your orientation switch a step further:
function orient(o){
switch(o){
case -90:
case 90:
$('#container').removeClass().addClass('landscape');
break;
default:
$('#container').removeClass().addClass('portrait');
break;
}
}
It turns out, there are a lot of them!
I found this one interesting:
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone won’t add any effects to the icon.
precomposed is available to iPhone OS
2.0 and later
The DaringFireball link Marc shared links to the Safari Web Content guide. As mentioned by Andy, you have to sign up for it, but it's free and easy (well, not as easy as OpenID, but close).
Safari Web Content Guide