0

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!

djoliverm
  • 355
  • 1
  • 3
  • 11

1 Answers1

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.

acy
  • 214
  • 1
  • 3
  • 16
  • Boom, that worked! Thanks so much! I'm just curious though as to an explanation of why that code ends up working? I would greatly appreciate it. Mainly I'd like to know if there is a way to get a code like this working that is outside of the theme folder, so it's one less thing to worry about. For example, I'm slowly building a child theme, so technically could this code (and the images) live in the child header.php? – djoliverm Dec 12 '13 at 15:35
  • I guess your blog is using permalinks and rewrites the url structure. The code should also work in a child template. You should always put your images and assets there. – acy Dec 12 '13 at 15:48
  • Otherwise try "./touch-icon-iphone.png" :) – acy Dec 12 '13 at 15:49
  • Confirmed working in a child theme, thanks so much! =) – djoliverm Dec 16 '13 at 21:38