https://developer.apple.com/design/human-interface-guidelines/apple-pay#Displaying-a-website-icon
This tells us to:
If your website supports Apple Pay, provide an icon in the following sizes for use in the summary view and the payment sheet:
But doesn’t tell us how to do that. Please advise what steps we need to take to make this happen.
I've seen from both Stack Overflow and a developer support email that this is supposed to come from standard website "favicons", but I have these in place, and still no icon is appearing on the payment sheet. So, I guess I need a very detailed answer to exactly what name/size/shape is required.
I have the following HTML in my page <head>, and the images referenced are found and do load when accessed directly:
<link rel="apple-touch-icon" sizes="120x120" href="/payment/htdocs/images/logo--azmvdnow-blue-60x60@2x.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/payment/htdocs/images/logo--azmvdnow-blue-60x60@3x.png" />
(An earlier, unanswered question that seems to be asking the same thing: https://developer.apple.com/forums/thread/723419 )
Hi @dougbkyndryl,
You can display the website icon on the Apple Pay payment sheet by setting the apple-touch-icon HTML property on the presenting page in the header section. See Configuring Web Applications to learn more about the HTML property,
For example:
<link rel="apple-touch-icon" sizes="48x48" href="/icons/icon.png”/>
Follow the specs outlined in the "Displaying a website icon” section from the Human Interface Guidelines for Apple Pay mentioned in your post.
Cheers,
Paris X Pinkney | WWDR | DTS Engineer
