Adding favicon so that when adding website to iphone home screen icon displays

I've made websites in the past where a simple favicon suffices and the website icon on the iPhone displays properly. However, when using Bootstrap studio, even when entering all the favicon information, I'm having trouble with this step. When I add https://slat.es to my iPhone's homescreen it shows up as a screenshot of the website itself. I've also tried adding favicon.ico and favicon.png manually to my hosting. Any suggestions would be welcome!

I presume you've already read this?

https://bootstrapstudio.io/tutorials/seo-and-social

I never have issues with favicons, but I don't get too fancy with them. I just create one in Photoshop, save it as a .png, and then use one of the many online favicon generator websites to create the .ico file. I drop it in the BSS website export folder, upload to server, and it's always worked fine.

When iOS Safari users add Progressive Web Apps (PWAs) to their home screens, the icon that appears is called the Apple touch icon. You can specify what icon your app should use by including a <link rel="apple-touch-icon" href="/Your-Icon.png"> tag in the <head> of your page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of the page content.

Your-Icon.png must be not transparent

Thanks kuligaposten! That worked. The issue was my png was transparent before. I appreciate your help!

If you use some of the favicon websites, many of them give you all the icons you need including OS ones. One that I use quite a bit is this one:

https://realfavicongenerator.net/

Does a nice job of making icons from your images and gives you lots of options. Hope that helps.

Thanks Jo! I appreciate your input!