Favorites icon for Safari Start Page

This is what the Forumosa icon currently looks like on the Safari Start Page across all devices:

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.)

1 Like

Hmm, on first look not something I can immediately and simply do, though it shouldn’t be a problem.

First, can any other Apple users confirm they are seeing this? A look at our settings seems to show it should possibly be covered.

Hmm… that’s weird. Let me try to look up troubleshooting guides specific to this platform. Is this Disqus?

Discourse! I’ll take a look as well, but want to be sure what’s happening.

1 Like

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.

1 Like

That happens to you only because your computer gives too many F’s.

1 Like

The favicon.

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.

1 Like

Screenshot of the stylized F?

You mean this? I believe this is the same as a favicon, but I’m not sure if I’ve got the vocabulary right.

Screen Shot 2023-04-20 at 1.40.14 PM

I cheated and asked ChatGPT. See if this works!

ChatGPT Answer:

To upload a Safari web clip icon to a Discourse forum, you can follow these steps:

  1. Create a square icon that is 256x256 pixels in size. This will be the size of the icon that will show up on the iOS Safari Start Page.
  2. Save the icon as a PNG file with a transparent background.
  3. Go to your Discourse forum and navigate to the Customize tab.
  4. Click on the Themes tab and then select the theme that you want to edit.
  5. Click on the Edit HTML/CSS button and then select the Header tab.
  6. Scroll down to the closing < /head > tag.
  7. Create a new line immediately above the closing < /head > tag, and add the following code:
<link rel="apple-touch-icon-precomposed"href="https://yourforum.com/path/to/icon.png">

(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.)

  1. 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.

1 Like

I have both :flushed:

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.

1 Like

And you get those in your home page of the browser, when not viewing any website? (it doesn’t look so).

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).

1 Like

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.)




I don’t know if it matters, but I’m still on OS Monterey, 12.6.4.

1 Like

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.

1 Like

Here is a website that will generate favicons for you for all devices.

According to the website’s audit tool, these are the results of Forumosa:


OK, I followed Chattie’s steps. I only did in the Classic theme for testing so use that one.