www.webdeveloper.com
Results 1 to 3 of 3

Thread: iDevice 'add to homescreen' icon

  1. #1
    Join Date
    Nov 2010
    Posts
    57

    iDevice 'add to homescreen' icon

    Hey guys,

    So I have a mobile website that I have made compatible with iPhones using
    HTML Code:
    <meta name="apple-mobile-web-app-capable" content="yes" />
    and I have tried to get it to have an icon (on the device's springboard) other than the miniature screenshot of the page using
    HTML Code:
    <link rel="apple-touch-icon" href="http://mywebsite.com/content/images/iphone_icon.png"/>
    with no success. I have also tried these variations
    HTML Code:
    <link rel="apple-touch-icon" href="http://www.mywebsite.com/content/images/iphone_icon.png"/>
    
    <link rel="apple-touch-icon" href="../content/images/iphone_icon.png"/>
    
    <link rel="apple-touch-icon" href="/iphone_icon.png"/>
    but none of them have any effect - it still puts the icon as a screenshot of the page. My icon is 57*57 pixels and is in png format. I have tested to make sure the url is valid - I don't get a 404 error..

    The page that I'm trying to do this off is m.mywebsite.com which is associated with mywebsite.com/mobile - could this be causing some sort of issue for me?

    Anyone have any ideas as to what I'm doing wrong?

    Cheers,

    Josh

  2. #2
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    im not really any good with iOS stuff being that im not an apple fan, but try replacing

    apple-touch-icon with apple-touch-icon-precomposed ?

    also, if for whatever reason your image directory is protected or secured this wont work. you'll have to move it to an unsecure location.
    Last edited by absolutmgd13; 06-22-2012 at 10:17 AM.

  3. #3
    Join Date
    Nov 2010
    Posts
    57
    Thanks for the reply! I think the precomposed has indeed fixed it.
    Apple says:
    'If you donít want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.'
    So it shouldn't really matter I wouldn't have though but it turns out I don't want the effects anyway.
    Also the icon only shows up after the web app has been loaded from the homescreen.. Maybe it doesn't ready that code initially?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles