Can't get Apple-touch-icon (webclip for bookmarks) to work on Wordpress site

Question

so I can't for the life of me get the apple-touch-icons working on my Wordpress site. I'm on WP 3.7.1, and I'm also using BPS Security and WP Super Cache (just in case those might have anything to do with it), plus I'm on a Hostgator hatchling shared server (the basic one).

I'm trying to implement the code directly from Apple's developer support documents as shown below:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

I've added that to wp-blog-header.php at the very top, and have added the icons to the root folder. They have the same name as are in the href. But this doesn't work at all. I searched online and found that some people had issues because their site was password protected.

I'm not sure exactly what this means, or in what context, but they said that they moved the files to another public/anonymous folder and that did the trick for them. Well it didn't for me. I even uploaded the files to WP media and copied the relative urls, and no luck.

Been scratching my head for a while and have no idea why I can't get it to work. I remember a few months ago I was able to do it for a Joomla site with no problem. I'd greatly appreciate your help and patience, thanks in advance guys!

Answer 1

Try uploading the images to your current template folder and use the following code:

<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?php bloginfo('template_url'); ?>/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?php bloginfo('template_url'); ?>/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?php bloginfo('template_url'); ?>/touch-icon-ipad-retina.png">

If this doesn't work, look at the page source and click/copy&paste the url of the image(s) to see if the generated URL is available.