Custom Favicon version 2+

[horus1963]

Description

First I must thank you for this great app. It has become a must in my homelab.

I am not really sure when it started but i am guessing after version 2. What I have noticed is the custom favicon set in the settings.yaml file, whether a local file on one off the web, is ignored and only hompepage.ico is served. I found this through the browsers web inspector in incognito mode.

I am sure it worked before because any old tab that is still open has the correct favicon.

Maybe things changed in the new version, any help as to how to get it working or how to troubleshoot would be greatly appreciated.

homepage version

v2.1.0

Installation method

Docker

Configuration

Settings.yaml:
title: Solisquad Dashboard

background: /images/background.png
backgroundOpacity: 0.6
favicon: /images/solisquad.svg

theme: dark
color: slate

useEqualHeights: true

disableCollapse: true

disableIndexing: true
hideErrors: true

headerStyle: boxed
fullWidth: true

layout:
  Servers:
    header: true
    style: row
    columns: 4
  Management:
    header: true
    style: row
    columns: 4
  Monitoring:
    header: true
    style: row
    columns: 4
  Utilities:
    header: true
    style: row
    columns: 4
  External Links:
    header: true
    style: row
    columns: 4

Container Logs

No response

Browser Logs

No response

Troubleshooting

I have not changed my mappings for /images folder, which still works for app icons so I am at a loss as to what to do here.

[shamoon]

Hmm no this didn’t change. Did you try checking that the image is ‘visible’ inside the container? how do you have it mounted into the container? Also would try completely removing and re-creating the container

[horus1963]

I can see the image from inside the container. I also tried changing it by deleting the old one and placing a new one with a different name. I also changed the file type from ico to png and even svg. I could see that fine from within the container also. I have the following bind points in the container compose file:

    volumes:
        - /home/hesham/docker/homepage/icons:/app/public/icons
        - /home/hesham/docker/homepage/images:/app/public/images
        - /var/run/docker.sock:/var/run/docker.sock
        - /home/hesham/docker/homepage/config:/app/config

and the favicon is inside the images folder. I also tried docker compose up -d --force-recreate to create a fresh container to no avail. Whenever I load the page in an incognito window, this is what I get in the html header:

<meta charSet="utf-8" data-next-head=""/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" data-next-head=""/>
<title data-next-head="">Solisquad Dashboard</title>
<meta name="description" content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations." data-next-head=""/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=4" data-next-head=""/>
<link rel="shortcut icon" href="/homepage.ico" data-next-head=""/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=4" data-next-head=""/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" data-next-head=""/>
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#1e9cd7" data-next-head=""/>

[shamoon]

Id you'd like to test out the :dev image Id be curious if it improves this for you, note that you will have to manually remove the icons from Safari's cache, which can be a PITA. :dev does contain some other stuff but of course nothing permanent or anything like that, so safe to try (pretty much always true for homepage)

[horus1963]

I will test it. But before I do, may be we need to map not only the favicon, but all the other icons apple, and others expect. Same as what you already have inside the container. So maybe instead of one icon we have a dedicated mount where we can place all the icons generated by the various online sites. Which seem to all have the same list of icons.

[shamoon]

Eh, not really the same issue, and favicons are notoriously messy. Just trying to help safari “see” the correct favicon here

[horus1963]

Understood. I just installed the latest dev but I made another change at the same time. I uploaded the apple-touch-icon.png of the logo instead of the svg file. Now with both this change and the dev image both arc and safari on the mac as well as safari on my iphone updated to the correct favicon. On the ipad, brave updated but safari did not even when I deleted all history and website data.

So all in all a very good improvement. Not sure how to force safari on the ipad to update though.

[horus1963]

After reading through a lot of apple community sites, I found that to update the favicon two options are usually suggested. The first is to set the date to 1 month in the future. That usually prompts a favicon refresh. The other option is to add a version to the html header server side. Such as href="/favicon.png?v=2"

Naturally I tried the first option and it worked. I wonder if you incorporate the second option if it would alleviate the problem with Apple’s aggressive caching.