Add website icon to Apple Pay payment sheet

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 )

Answered by DTS Engineer in 803327022

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

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

Add website icon to Apple Pay payment sheet
 
 
Q