Is it possible to force iphone/ipod to update apple-touch-icon once webapp is added to home screen?

Question

I have created a webapp using all of the recommended link and meta tags for safari, eg.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="/startup.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />

However, my issue is if the startup.png or any of the apple-touch-icon image files are updated on the webserver, it doesn't seem like a user's iphone or ipod will retreive the updated file once it has been saved to their home screen (I'm guessing it's cached somehow or something). It works to remove the webapp from the home screen and re-add it. But is there a way to let the application know it needs to refresh these images without requiring the user to delete and re-add it?

Densmore

Answer 1

It's been a few years since this question was asked/answered and I'm here to report that this is now possible!

In newer iterations of iOS, the Apple Touch Icon that is displayed on the homescreen is cached just like any other piece of content from the website. By simply changing the name of the image, it will force the homescreen shortcut to refresh the icon the next time the shortcut is launched.

However, to keep in line with Apple's naming conventions, you can simply append URL variables to the reference whenever you want the icon to be redownloaded and continue to call the image apple-touch-icon.png.

What I have done to automate this issue (in PHP) is append the last modified date/time to the image. For example:

<link rel="apple-touch-icon" href="apple-touch-icon.png?m=<?php echo filemtime('apple-touch-icon.png'); ?>" />

This outputs:

<link rel="apple-touch-icon" href="apple-touch-icon.png?m=1415832495" />

Now, you don't have to do anything but literally overwrite the image and everything else will happen automatically. When you change the image, the modified time changes and doesn't match what the user has in cache anymore, so it forces a new download. Simple!

---

OLD ANSWER: I've done a ton of research into this trying to find a way. Unfortunately, it is not possible. It needs to be removed and re-added to the home screen for the new icon to be used.

Shantelleshantha

There is a private API to do this, but I don't think we're allowed to use it. If you notice the calendar app has the icon updated everyday to change the date. – Basin

Within an app, there may be a way to do this. However, the original poster is asking if it's possible to change the icon if you bookmark a website to the homescreen, not from an app. – Shantelleshantha

@Densmore Great news, this is now possible! Please see my updated answer! – Shantelleshantha

As per the edit, I've found that the iPhone needs to restart first. That's kinda a problem... – Maryrose

Has anyone gotten this to work on iOS12? I've updated the icon links, but the old icon remains after launching the Web App. I've restarted the device. Same behavior on iPhone iOS 12.4 and iPad iOS 11.2.5. Saving a new Web App to the home screen picks up the new icon, but the ones already saved on the home screen are not updating. – Sampson

Has there been any changes to this? It's not working for me at the moment. I have a PWA that was installed with add to homescreen, and I can't get it to refresh any apple-touch-startup-image at all. This post is a bit old, so maybe there's something new in the world? – Cratch

Answer 2

I just tested a theory on the Iphone 5 and Ipad 2, and it worked for both. Similar to the favicon, you can force the new favicon to pull by changing the href. Instead of href="/apple-touch-icon.png" I used href="/apple-touch-icon.png?ver=1.1" and it pulled the new icon when the site was visited (without deleting and re-adding to home screen).

Umbrella

This solves the problem and also works for apple-touch-startup-image which also has the same issues as apple-touch-icon. (Confirmed in iOS 8) – Wrack

Answer 3

will just add my small "work around". Have been tryied all kind of corrections to my website to get the icon to show up correctly in my bookmarks on my own IPAD. Later found out that on apple products there newer visited my site before, ICON showed up fine. All my visits to my site was as http://mysitename(ref).dk but when I added http://www.mysitename(ref).dk the IPAD finally discovered this as a new website and the apple ICON was located and presented correctly in my bookmarks. :-) Jacob

Sandell

Answer 4

I've seen icons get updated, but I don't think it's possible to affect this update in any way. I've noticed the updated icons after the phone was rebooted, but I haven't look enough into it to say anything conclusive.

Hayden

Answer 5

Within my webapp if i just change the startup.png file with a new one, the first time a reload the app from the home screen it shows the old image. Closing and reopening the app shows the new startup.png image. iOS 4.2.1. By the way, the same apllies for the icon.

Sporophyte

Answer 6

Removing and re-adding the webpage/webapp to the homescreen may not even suffice. I just tried to

1. delete the bookmark from homescreen
2. reload the page in safari
3. add the bookmark to homescreen

==> it still shows the old icon it seems to have cached somewhere :(

Hiatus

it works on my iphone 5 if you first tap the button to bookmark to homescreen, then cancel, then reload the page, then again tap the button to bookmark to homescreen -- now you should see the updated image – Bergeron