My website's apple touch icon won't update on my iPhone

Question

I recently added apple touch icons to my website. When I add the site to my favorites on my iPad or my wife's 4S it uses the icon. I think that's only because I had never bookmarked the site on those devices before.

On my iPhone, I had previously bookmarked the website in my favorites and it used the generic first number/letter of the website's name as the touch icon. Now that I've got touch icons on there, I can't get it to use them. I've tried clearing the website data on Safari on my phone, closing the browser and reopening it, even shutting off and restarting the phone. No matter what I do, it still uses the generic touch icon. Is there anything I can do to get it to update?

Here's the website: 3to1video.com

Answer 1

I just bookmarked it on my iPhone and added to the home screen and can see the Icon. It did take a while(2s) to get the icon.

Try and see if you get it with a faster web connection and wait for the icon to appear before saving it. Also Try adding it as a home screen icon and see if that works.

Nice site btw.

Answer 2

Okay, I finally got it to work. It had to do with where in the header the

<link rel="apple-touch-icon" href="apple-touch-icon-57x57-precomposed.png" />

was located. I'm using Squarespace and I had to put it in the header section on the main page rather than the header section of the code injection. Not sure exactly why that made it work in this one instance, but at least it's fixed.

Answer 3

I got it to work too, for my website.

I have an iPhone 6. The deal is, when you want the bookmarks, the favorites, and the Home Screen to work, but you already had favorites before, you have to :

RESET your iPhone

Just clearing all website data will not work.