[Bug]: missing icon in Safari and PWA on iOS

[felixguilherme]

Verified issue does not already exist?

• I have searched and found no existing issue

What happened?

The Actual favicon is missing in the Safari browser and therefore in PWA installs on iOS 18.3.1. It works as expected on macOS 15.3.1 with Safari 18.3.

Actual version: app: v25.1.0, server: v25.1.0

iOS:

macOS:

How can we reproduce the issue?

1. Install Actual with this docker compose file
2. Activate HTTPS using a self-signed certificate
3. Open Actual in Safari
4. Add Actual to the home screen

Where are you hosting Actual?

Docker

What browsers are you seeing the problem on?

Safari

Operating System

Mobile Device

[CTRL-panino]

Before seeing your post I was going to open an issue because I encountered the same problem

[alecbakholdin]

I attempted this on iOS 18.2 on Safari and it seems to be working. Are you still experiencing this issue?

[CTRL-panino]

Hi @alecbakholdin, unfortunately, I'm still experiencing the issue.
I'm running the latest Actual Budget server version and the latest iOS version (18.3.2).
The issue is well described by @felixguilherme, I'll add one thing about my use case that hopefully could help in figuring out the problem.
The icon is always missing, except when I open the share sheet in Safari while on the Actual server page, where the icon is displayed correctly (see the image).

[alecbakholdin]

@CTRL-panino see below Stack Overflow post which explains your problem. It has to do with the fact that you're using a self-signed certificate. There's unfortunately not much we can do about this issue, I think, though there appear to be some steps you can take to register your certificate with iOS: https://stackoverflow.com/questions/6807349/why-wont-this-apple-touch-icon-work

[CTRL-panino]

Thank you for your help. I tried downloading and installing the certificate, but it doesn't seem to be working. Here are the steps I followed:

1. I deleted the Actual Budget web-app
2. I cleared Safari history and data
3. I downloaded the selfhost.crt file from my Actual Budget server
4. I installed it from Settings -> General -> VPN & device management
5. However, it doesn't appear in Settings -> General -> Info -> Certificate Trust Settings

After these steps, when I try to re-create the Actual Budget web-app, the missing icon bug is still present. Am I doing something wrong?

[alecbakholdin]

I was able to install the certificate by just clicking on the file. After downloading the file to my iPhone, I clicked on the file in Downloads:

It prompted me to install it:

I go to settings, and I see this:

Then I click on install in the top right:

After these steps, I do see the profile in VPN & Device Management:

Let me know if this helps! I wasn't able to get my docker-compose to work with the self-signed certs, so this is the most I can help with right now, I'm sorry!

[CTRL-panino]

Thank you very much, I really appreciate your help.
The only differences between what I did previously and your new comment are:

Your certificate is called localhost, while I created mine following this guide, and it was named selfhost.crt. Did I choose the right one?

I do see the profile in VPN & Device Management

I see it there, too. However, according to the link you sent in your previous comment, I should also see it in Settings -> General -> Info -> Certificate Trust Settings, but it doesn't appear there

[ngocphamm]

I think this is happening to me too, even when I have Actual Budget behind Cloudflare Access tunnel, which is indeed under HTTPS. Favicon shows the Actual logo properly, but the Add to Home Screen logo is still the generic A letter.