Basically, there is no icon. All you see is a generic “F”. Super annoying and hard to spot.
To fix this, somebody (probably @tempogain?) needs to upload a 256px by 256px .png image of the icon. This is an additional step to the 32x32 favicon that’s already been uploaded. Here are some instructions.
(Note that the article says 114x114, but this may have been written before iPads came out. Safari on iPad shows a larger icon, so go with 256x256.)
Ok I’ll help you look into it too. Some platforms only allow you to upload a 32x32 favicon which shows up in the tab (which isn’t what we’re talking about here), so you may need to directly inject the code into the < head > of the website, if you have access to the HTML.
Right now on my desktop (Safari 16.4.1) I see the more stylized F with the circle. On my iPhone (iOS 16.4.1) I see the dull F that @HongKonger describes above. On the iPad (iPadOS 16.4.1) I see the dull F, although I do see the stylized F in the “tab icon”, like I do on my desktop.
(In the code above, replace “https://yourforum.com/path/to/icon.png” with the URL where your icon is hosted. You can upload your icon to a hosting service like Imgur or Dropbox and use the URL from there.)
Save your changes and exit the editor.
After you have completed these steps, your icon should show up on the iOS Safari Start Page when a user adds your forum to their favorites. It may take some time for the icon to update on the user’s device, so be patient.
The hard part will be uploading the icon image, and finding out the URL. I’m not sure how it works in Discourse specifically, but in most web design platforms, there is an image gallery that stores all the images you’ve uploaded to that website. There may be something similar in Discourse.
If there is, then you can upload the icon image into the gallery, then click on the image to open it in a new browser window. From there, you can see the URL of that image.
Of course, you could also just upload the icon image to Imgur or Dropbox like ChatGPT suggested. Please let me know if you need help creating the 256x256 icon image file.
Favicons and “Safari web clips” are different. The first shows up in the browser tab (and some other places), while the latter is a bit larger and shows up in iOS Safari Start Page. Best practice is to upload both images to your website, but sometimes website admins who don’t use Apple products skip the second image.
When I open a start page on my desktop, I see the stylized F (Safari web clip) under the favourites section. However, when I open a start page on my iPad, I see the generic F.
But I see the stylized-F-favicon on tabs on my iPad, my desktop, and my iPhone (not that I ever have my iPhone in landscape to see the tab bar).
Ok, this confirms that the issue isn’t unique to my devices. (Even if it is a bit strange that it only affects iOS Safari for you, and not Safari on Mac.)
It’s possible that older versions of Safari in Monterey just used the favicon image as the Start Page icon, whereas current versions use the iOS Safari “web clip” image because they are larger and clearer images.
The downside is that the website admin needs to upload web clip images separately.
