Why won't my website favicon show up in Safari favorites bar automatically?

My website was not displaying the Favicon in the menu bar as in this question. See the copied image below but in this case we would be Google and trying to get that icon to populate without user intervention.

image from other question

I am aware that locally, these favicon files re stored in ~/Library/Safari/Touch Icons Cache/Images/ however I was trying to figure out where Safari pulls the .png file from to cache initially.

As noted in one of the answers to the referenced question, it is not practical to ask a site to fix this, therefore I wanted to know how to fix the issue as the website publisher.


Solution 1:

The solution to my question is to upload a Favicon.png file to the root directory of my website as such. This is where Safari pulls the favicon to show in the favorites bar.

enter image description here