0

I have a web app with a visualforce home page that contains the following code:

<apex:page controller="Ctrl_StoreHome" showheader="false" sidebar="false" standardStylesheets="false">
<head>
    <title>Storeboard</title>

    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" name="viewport" />

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

    <!-- iPhone ICON -->
    <link href="{!URLFOR($Resource.AppImages, 'StoreBoard-Icon-57.png')}" sizes="57x57" rel="apple-touch-icon" />
    <!-- iPhone 4s ICON -->
    <link href="{!URLFOR($Resource.AppImages, 'NSBicon_iphone4s@2x-120.png')}" sizes="120x120" rel="apple-touch-icon" />
    <!-- iPhone 5 ICON -->
    <link href="{!URLFOR($Resource.AppImages, 'NSBicon_iphone56@3x-180.png')}" sizes="180x180" rel="apple-touch-icon" />
    <!-- iPhone 6 ICON -->
    <link href="{!URLFOR($Resource.AppImages, 'NSBicon_iphone6@2x-120.png')}" sizes="120x120" rel="apple-touch-icon" />
    <!-- iPad ICON-->
    <link href="{!URLFOR($Resource.AppImages, 'NSBicon_ipad@2x-152.png')}" sizes="152x152" rel="apple-touch-icon" />
    <!-- iPad2 ICON-->
    <link href="{!URLFOR($Resource.AppImages, 'NSBicon_ipad2@1x-76.png')}" sizes="76x76" rel="apple-touch-icon" />
    <!-- iPhone (Retina) ICON-->
    <link href="{!URLFOR($Resource.AppImages, 'StoreBoard-Icon-114.png')}" sizes="114x114" rel="apple-touch-icon" />
    <!-- iPad (Retina) ICON-->
    <link href="{!URLFOR($Resource.AppImages, 'StoreBoard-Icon-144.png')}" sizes="144x144" rel="apple-touch-icon" />

It seems to work fine on a iPhone 5 with iOS 7 but not on a iPhone 5 with iOS 8? I'm not sure what is wrong or even how to debug this issue.

  • You have specified two different 120x120 images. Probably best to have only one. – Jonathan Hersh Feb 11 '15 at 19:45
  • Thanks, I thought about that also and removed the first 120. Still nothing. When I try and add it to the home screen I get the screen shot image. – user4978 Feb 11 '15 at 20:59
  • Silly question, but you're sure that URLFOR actually resolves to an image? You see an image at that URL when you open it in your web browser? – Jonathan Hersh Feb 11 '15 at 21:25
  • Yes when I inspect the element I do see each image. – user4978 Feb 12 '15 at 3:09
2

I ran into the same issue. Images hosted as static resources simply refused to work for the Apple touch icon. However, the same image hosted outside of Salesforce worked fine.

I then realized I was viewing my Visualforce page within an authenticated session inside the org. When requesting the touch icon, Safari must not be passing the authentication headers to the server, and so it encounters the Salesforce auth prompt instead of the image.

To solve this problem, I created a public site in Salesforce, and then referenced that public site's URL in front of the URLFOR() calls, essentially making them absolute URLS.

E.g.

<link href="https://my-public-site.cs17.force.com{!URLFOR($Resource.AppImages, 'NSBicon_iphone4s@2x-120.png')}" sizes="120x120" rel="apple-touch-icon" />

Hope that helps you!

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.