[BUG] Favicon not loading on page load

[elendil7]

Environment

Self-Hosted (Docker)

System

Dashy running in Docker container behind Nginx

Version

3.1.0

Describe the problem

Dashy favicon no longer loads after update.

Additional info

No response

Please tick the boxes

• You have explained the issue clearly, and included all relevant info
• You are using a supported version of Dashy
• You've checked that this issue hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[CrazyWolf13]

Hi
It's really hard with such less details to diagnose this, for me it's working totally fine.

Please share your nginx conf.
You can try clearing all browser cache and cookies, and try another browser in the private window.

[pelstob]

Hi, I'm running pretty much the same configuration and I'm having an issue with the favicon not showing in Firefox. This is using a fully cleared cache and also in a Private Window. I can't comment update breaking it, as I only switched back to Firefox from Brave a few hours ago. I get the same problem if I bypass the reverse proxy.

If I append the various /favicon.ico, /web-icons/favicon-32x32.png etc. listed in Firefox's inspector tab to the URL most of the icons are loading.
However, if I'm reading the Network Inspector tab correctly, then Firefox is trying to use https://home.mydomain.org/img/icons/favicon-16x16.png but favicon-16x16.png doesn't exist. It's showing 404 not found in Firefox's inspector and as a directly accessed URI.

I think there are 2 issues here: The missing favicon-16x16.png and Firefox seemingly being determined to use the missing image, rather than fallback to favicon-32x32.png or favicon.ico.

Cheers.

[CrazyWolf13]

Yeah I've just looked into this and in firefox the favicon is not showing up at all.

Seems to be only a problem on firefox and possibly apple devices:

Firefox still seems to have hardcoded a preferred size:
view-source:resource:///modules/FaviconLoader.sys.mjs

....
const FAVICON_PARSING_TIMEOUT = 100;
const FAVICON_RICH_ICON_MIN_WIDTH = 96;
const PREFERRED_WIDTH = 16;
....

I think dashy is somewhat missing the correct variable to define the favicon for firefox, however I was not able to find any working variable. It seems that firefox has issues regarding favicon dating from a month ago to 20years back 😂

I tried adding the 16x16 pixel variant which was once included:
7e4e2ed#diff-66c2900b7fcc62569ea372a2058eb4935e7559dcea7a3052b36d843a6e190734

But that did nothing, as firefox somehow expects a favicon on exactly this url:

[Lissy93]

Can confirm this bug, icon is not displaying on Firefox.
I'll submit a fix (by adding the appropriate icons in, and updating the paths in index.html) this weekend.

[mshpp]

If anybody is using Caddy as a reverse proxy and looking for a quick fix: modify your Caddyfile to rewrite the favicon path:

dashy.domain.example {
  reverse_proxy http://<your-ip-here>
  rewrite /img/icons/favicon-16x16.png /favicon.ico
}

If you also need Apple support (or whatever that failed call to apple-touch-icon-152x152.png should be), you can add it in the same way:

rewrite /img/icons/apple-touch-icon-152x152.png /favicon.ico

[rdswords]

With today's image update, it's now working for me (Firefox). The favicon is back!

[CrazyWolf13]

Yup got fixed by a PR here:
#1678

[elendil7]

Thank you!

[Zixim]

confirmed, thx for the merge !