Can't get apple-touch-icon to work

[AKSE]

So I created the touch icons, uploaded them and added this to my header.tpl

<link rel="apple-touch-icon" href="/apple-touch-icon.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="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />

I still only get a "?" when bookmarking on an iPhone. When "place on home screen" it will show the correct icon but not for bookmarking/favorites.

I tried both absolute and relative linking.

If I follow the links when browsing on a computer and checking the source it will show the right images so they are not broken.

I tried just adding this to a  .html on a non prestashop site and there it works right away.

I tried to add the images both to prestashop root and to the theme (Warehouse) root, still not showing more than "?" when bookmarking on iPhone. 

So I'm out of ideas.

What am I doing wrong?

 

 

 

[Impretto]

same problem...UP

[andrew]

I also have the same problem

It's OK when adding to the home screen, but not when adding to the safari favourites

[Scully]

Up again! Same problem with all prestashop up to the latest 1.6. versions.

[Gr3c0]

Up Again! Same problem with 1.6.1.7

Any Idea?

Thanks in advance,

[Scully]

I am guessing all PS 1.6. versions are affected by this problem. Or is there any known instance of a PS 1.6. running with the apple icon correctly showing up when saving to favorites?

[selectshop.at]

Tried also by this way ?

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

 

[Scully]

Thanks to selectshop for your reply. I tried every way one could imagine with little success.

1. The only way bringing it up to working is not installing prestashop on the root folder. If you have it running under www.example.com/shop/ it works. But it does not, when having it running in root.

2. Also I could never figure out why iOS / iPhones handle the icon differently depending if the shop link is saved to home screen or favorites. The apple documentation does not mention any different handling.

3. Since the apple icon works for different systems (CMS as well as shop systems), I wouln't say it's a bug within iOS, even though the issue exists under the above mentionned circumstances.

 

[Scully]

Based on above mentionned facts I finally found a solution which worked out:

1. Move everything that belongs to prestashop into a subfolder, for example /shop

2. Leave apple touch icons in root.

3. Create a new .htacess in your root folder (note that the old existing .htaccess has also moved to subdir)

4. Put the following into your .htaccess (change "shop" to desired subdirectory and "getyourshop.ch" with your own domain.

# GetYourShop.ch
# Have perstashop in a subfolder but access it from your root base path
# make the changes to the file according to the instructions.

# Do not change this line - RewriteEngine on
RewriteEngine on

# Change yourdomain.com to be your main domain.
RewriteCond %{HTTP_HOST} ^(www.)?testyourshop.ch$

# Change 'subfolder' to be the folder you will use for your main domain.
RewriteCond %{REQUEST_URI} !^/shop/

# Don't change this line.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# Change 'subfolder' to be the folder you will use for your main domain.
RewriteRule ^(.*)$ /shop/$1

# Change yourdomain.com to be your main domain again.
# Change 'subfolder' to be the folder you will use for your main domain
# followed by / then the main file for your site, index.php, index.html, etc.
RewriteCond %{HTTP_HOST} ^(www.)?testyourshop.ch$
RewriteRule ^(/)?$ shop/index.php [L]

5. Take your iOS device and close the browser by swiping it to the top. Start browser and go into private mode. Visit your shop and add the link to your favorites.

Btw - this solution does not need icons to be defined in the header.tpl. But leave a copy of all sorts of icons files in the corresponding sizes in the root direcotry.

Edited February 12, 2018 by Scully (see edit history)

[MockoB]

Anyone tried this: http://angelwings.net/blog/create-home-screen-apple-touch-icons-for-ios-and-android/

[Scully]

MockB you are only spamming. Your referenced page is just a totally useless page.