Add to Home Screen icon not populating on Ipad with ios 9.1 on safari browser

Question

I have used below lines of code to populate the Add to home screen icon but it still gives an image of the entire page while clicking on add to home screen icon.

    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>

I am sure the path to this images are correct.

I have tried almost every solution available on internet including this website but don't seem to get it working. Please let me know in case if any other information needs to be provided.

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4

Any points of assistance would be of immense help.

Answer 1

Be sure that you're not on a dev server or on a site that you need to obtain a certificate for. I ran into a similar issue and was finally resolved by moving assets onto production srvr.

I tested on physical (live) devices and also using BrowserStack to reach those devices and browsers I didn't have and everything worked as expected.

Answer 2

I could not populate the image in Add to Home Screen option due to https certificate issue .Though i could browse the images using the path of the image but surprisingly it did not populate the home screen image on ipad.

Would like to get few answers on how to debug on safari browser from within the ipad.

I added a new certificate for the device and the add to home screen icon image started appearing as intended.