How to get an icon to appear in IOS Safari's Suggested Website list

Question

I'm trying to figure out how to get my site icon to appear in the iOS Safari Suggested Websites section rather than the default grey Safari icon/placeholder. Other sites are able to do this, but I can't figure out how. I assumed it was related to either the favicon.ico or apple-touch-icon.png file, but I haven't been able to nail down what's being used or how to get it to work for my site.

For example, when I clear my Safari cache and history, open Safari, and start typing "arstechnica", I get this:

Same idea when I type in "americanexpress":

And "cnn":

But, when I try other sites, such as "wellsfargo", I get the placeholder (which is what's happening for my site as well):

My apple-touch-icon.png wasn't in the root folder, so I moved it but that didn't seem to make any difference. (My favicon.ico was already in the root folder.)

Upon investigating some of these sites, it doesn't seem to be either the favicon.ico or the apple-touch-icon.png file that's being used. arstechnica had an apple-touch-icon.png file (through a cdn redirect), but it's not the same image as the one used for the Suggested Sites. It did have a favicon.ico that looked like it matched, but the americanexpress favicon.ico wasn't a match to the Suggested Sites icon, either. Examining each HTML file for link tags yielded inconclusive results as well.

Does anybody know what image file is used for the Suggested Sites icon and how I can get it to show up for my website?

Answer 1

I think you have to put a file called --> home_badge_64.png in the root folder of the website.

This would go in your head tag:

<link href="/home_badge_64.png" rel="apple-touch-icon" />

As a real life example I'm trying to get to work right now --> http://www.sisltd.ca/home_badge_64.png

Answer 2

It seems that the icon is taken from the OpenGraph og:image metatag. I just put it on my website, and changing the value of that tag changed the icon shown in the suggested website item.

<meta property="og:image" content="link_to_your_icon.ext" />

I had all other OpenGraph tags too, so I didn't test if that metatag alone works or you need all others.