Apple Bookmark Icons not displaying

Permalink
I uploaded all of my Bookmark Icons onto my new site and I am not able to see the apple icon.

I am able to see the favicon.ico file.

When I access my site on an iphone or ipad, and click on the Add to Home Screen button, the apple icon I uploaded does not appear.

(I have not tested with the Windows icon but I assume it behaves in the same way)

I built this site on a different domain before moving it into production. The build site was on a different server with a different version of PHP. The Bookmark Icons worked fine on the build site.

I am running my site on a Linux Shared Hosting environment. My guess is that I cannot see the apple icon on the production site due to a file read/write permission issue.

Can anyone offer any advice on what I would need to check in my PHP settings if I am correct on this assumption?

SteadyIT
 
mesuva replied on at Permalink Reply
mesuva
What happens when you try to access the favicon directly?
(i.e. view the source of your homepage and cut and paste the URL to the file)
SteadyIT replied on at Permalink Reply
SteadyIT
I am able to access the favicon and apple icon directly through the URL to the file.

I can see the favicon in the tab of my Chrome browser. Though when I try and access the apple icon on my Iphone, by clicking on "Add to Home Screen," it is not viewable.

I built the site on a different account (which is on a different shared server) on the same ISP. The only difference I have found so far is that their are two different versions of PHP, between the build site and the production site.

When I go back to my dev site. I can see the icon when I click on the "Add to Home Screen." So far the only thing I noticed is that the PHP versions are different between the two accounts.
SteadyIT replied on at Permalink Reply
SteadyIT
Any help on this would be appreciated. I assume it is related to file permissions, but I can't seem to nail the answer down.
SteadyIT replied on at Permalink Reply
SteadyIT
These are the PHP settings from my dev site where the apple bookmark icon is working:

# concrete5 Version
5.6.2.1
# concrete5 Packages
Auto-Nav Pro (1.5), Automatic Email Obfuscator (1.2.3), Bootstrap (3.0.0.4), Bootstrap Buttons (3.0.0.1), FlexSlider (2.2.0.4), List files from set (1.0.4).
# concrete5 Overrides
blocks/flexslider, blocks/autonav_pro
# Server Software
Apache
# Server API
cgi-fcgi
# PHP Version
5.3.26
# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, eAccelerator, ereg, exif, filter, ftp, gd, gettext, hash, iconv, imagick, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mysql, mysqli, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, SimpleXML, soap, sockets, SPL, SQLite, sqlite3, standard, suhosin, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, zip, zlib.
# PHP Settings


There are the PHP settings from the prod site where the apple bookmark icon is not displaying on an iphone:

# concrete5 Version
5.6.2.1
# concrete5 Packages
Auto-Nav Pro (1.5), Automatic Email Obfuscator (1.2.3), Bootstrap (3.0.0.4), Bootstrap Buttons (3.0.0.1), FlexSlider (2.2.0.4), List files from set (1.0.4).
# concrete5 Overrides
blocks/autonav_pro, blocks/flexslider
# Server Software
Apache
# Server API
cgi-fcgi
# PHP Version
5.4.19
# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, hash, iconv, imagick, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, xml, xmlreader, xmlwriter, xsl, Zend Guard Loader, zip, zlib.
# PHP Settings
mesuva replied on at Permalink Best Answer Reply
mesuva
I don't really see that this would be a PHP issue. The only server related thing I can think of is MIME types, maybe it's serving the image file of the icon incorrectly.

Can you have a look at request to the image an see what Content-Type it's returning? On our site I just have it as 'image/png'.

I'm assuming you've compared the HTML output of both the sites? Are they both outputting the exact same code for the favicon? Can you post any links?
SteadyIT replied on at Permalink Reply
SteadyIT
Here is the output for the icons sections for the two pages

<link rel="shortcut icon" href="/files/8813/9200/2336/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/files/8813/9200/2336/favicon.ico" type="image/x-icon" />   
<link rel="apple-touch-icon" href="/files/7813/9200/2362/iPhone.png"  />
<meta name="msapplication-TileImage" content="/files/6413/9200/2392/windows.png" />


<link rel="shortcut icon" href="/files/8213/9074/5289/rscc-favicon.ico" type="image/x-icon" />
<link rel="icon" href="/files/8213/9074/5289/rscc-favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/files/5713/9074/5304/rscc-iphone.png"  />
<meta name="msapplication-TileImage" content="/files/4113/9074/5338/rscc-windows.png" />
SteadyIT replied on at Permalink Reply
SteadyIT
@mesuva Thanks for the additional questions. You asked:

"Can you have a look at request to the image an see what Content-Type it's returning? On our site I just have it as 'image/png'?"

Sorry I am not sure what you mean by this question?
SteadyIT replied on at Permalink Reply
SteadyIT
@mesuva - thanks the advice in your response, it lead me in the right direction. I wanted to follow-up on this posting in case anyone experienced a similar issue.

As already mentioned, my apple bookmark icons were not displaying on an iOS device.

I had turned on hotlink protection in my cPanel because it seemed like a good thing to enable (at the time) for my site.

Hotlink protection added the following code to my htaccess file:

RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]

This inadvertently was blocking my apple bookmark icons.

When this was removed the issue was resolved.