Customizer: Favicon not showing in Safari Mobile Bookmarks

[JessBoctor]

Steps to reproduce the behavior

1. Go to My Site > Appearance > Customize > Site Identity and set a site icon. Save changes
2. Open the website in Safari mobile
3. Add the site to the bookmarks
4. The icon doesn't appear in the bookmark manager options

What I expected to happen

The site Icon to appear to the left of the bookmark description and URL.

Here is an example from bookmarking the WordPress.com site:

What actually happened

There is just a blank logo space.

See:

Compared to mobile Chrome on iOS:

Context

Reported by user in #30393940-HC User follow up is in #4104644-ZD

Browser / OS version

Safari 14 iOS

Is this specific to the applied theme? Which one?

No

Does this happen on simple or atomic sites or both?

Atomic only

Is there any console output or error text?

Not that I can see

Level of impact (Does it block purchases? Does it affect more than just one site?)

Affects multiple sites, does not block purchases

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

See screenshots above

[wpericam]

Tested and reproduced. I also noticed the favicon not showing in Chrome desktop when typing a site address into the address bar.

WordPress.com Site Example

Google.com Example

*I obfuscated the specific sites and URLs being recommended because they from my personal browsing history

[wpericam]

Never mind the above comment. Once I launched the site, the favicon showed up in the place I mentioned, as well as others I was planning to add.

The launching of the site did not correct the Safari mobile bookmarks behavior though.

[zachspears]

Able to reproduce and seeing the same issue: :

[thekingsprojects]

Another case here: 35630263-hc , follow-up 5266035-zen

I don't have an iPhone to check this with myself, and previous HEs haven't been able to replicate, but the user saw this issue and said it sounded like the problem they were experiencing.

I've seen other (likely unrelated) cases of favicons not showing up in Chrome that were resolved by adding a bunch of favicon files, including an apple-touch-icon.png file, to the site's root with SFTP, so I've advised the user to try that as a workaround while this is being looked at.

[nicolynramos]

Another here: 5353812-zen

[pauljacobson]

Also reported here: 5461908-zen

I tested adding a bookmark of our user's site to my Android device's screen and the site icon displays. This seems to be primarily an iOS issue. I was able to reproduce this issue on Browserstack on iOS 15.6:

https://user-images.githubusercontent.com/2912202/183420192-5189f9f7-d66c-4688-a999-6de1a01b1a05.mp4

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 4104644-zen
• [ ] 5266035-zen
• [ ] 5353812-zen
• [ ] 5461908-zen
• [ ] 5537253-zen
• [ ] 6197880-zen
• [ ] 6574020-zen
• [ ] 7531198-zen
• [ ] 7582198-zen
• [ ] 7600970-zen
• [ ] 8766856-zen