Favicon path not relative to public_url

[danielohling]

Describe the Bug

From what I can see in the network tab, directus tries to get the favicon from /root/ path instead of what is specified in public_url.

I run nginx and directus as a subfolder with proxy_pass on route /Api.

My main application is on the root path ./.

see print screens below:

I'm thinking it should fetch the favicon the same way as project_logo? and respect the path in public_url

To Reproduce

Add a new favicon i settings and logout och refresh the page.

Directus Version

v10.7.2

Hosting Strategy

Self-Hosted (Docker Image)

[rijkvanzanten]

I believe that's just the browser's default /favicon.ico load that kicks in before Directus' JS sets the favicon based on the settings 🤔

[robinsonjohn]

The JavaScript used by Directus to render the favicon does not render for me on any iOS devices (iPhone, iPad). When utilizing the Directus web app on an iOS device, the favicon is missing.

I have attempted to use both svg and png files, but neither have worked.

[hanneskuettner]

It seems like the Safari and Safari on iOS does not support SVG favicons^1 :( Tracking this in #22398 and seems unrelated to this issue.

[robinsonjohn]

It seems like the Safari and Safari on iOS does not support SVG favicons1 :( Tracking this in #22398 and seems unrelated to this issue.

Footnotes

1. https://caniuse.com/link-icon-svg [↩](#user-content-fnref-1-7426d98933b641e56a097e84c7f76bc1)

Thank you for this link. For the record, the favicon does not appear on iOS devices using either Safari or Firefox.

[hanneskuettner]

As Firefox on iOS is just a rethemed Safari, that totally tracks.

[divStar]

I apologize in advance, but why is the "default favicon.ico" even kicking in? I do have a SVG logo and the path https://directus-mycv.my.family/assets/c846e6d3-2c6b-47ce-84da-637b3cd12e9b is valid (in my network). Copying and pasting it, displays the SVG.

The tag is in the HTML header:

<link rel="icon" href="https://directus-mycv.my.family/assets/c846e6d3-2c6b-47ce-84da-637b3cd12e9b">

According to https://caniuse.com/link-icon-svg I can use SVG favicons (I am on MacOS 14.4 and Firefox 125.0.3). It probably should display the icon, yet I receive the following:

{
    "errors": [
        {
            "message": "Route /favicon.ico doesn't exist.",
            "extensions": {
                "code": "ROUTE_NOT_FOUND",
                "path": "/favicon.ico"
            }
        }
    ]
}

Nevertheless: the icon does display in the tab properly, but when creating a bookmark, it sadly does not display at all. Any idea what I am doing wrong?

[rijkvanzanten]

@divStar That's because Directus sets the favicon in client-side JavaScript based on the settings of the projects, and most modern browsers will default to trying to fetch /favicon.ico if none has been set yet. I'm assuming the error you're seeing is the browser fetching the default favicon first before Directus' one is loaded 👍🏻

[divStar]

Thank you for your time and explanation! Is there something I can do about this?

It is a bit annoying, especially because it actually does sometimes display properly in a tab (not always though - perhaps it depends on if the favicon request is already done or not), but never in a bookmark. Though of course this isn't really as important I guess.

[rijkvanzanten]

@divStar What OS / browser is that? On my end bookmarks seem to use whatever the favicon state was at the time I created the bookmark, but ymmv in different browsers/oses

[divStar]

I am on MacOS with one of the most recent Firefox browsers (v123+). Maybe that's the reason. I'll look into it and report more thoroughly.

[divStar]

I sadly haven't had time to look much into this issue, but the issue still persists in Firefox 131.0 and MacOS 14.6.1. The explanation is indeed plausible, but perhaps we could somehow have the favicon be present in the backend, too? E.g. render the SVG into a favicon.ico or even include it in some way, that would allow bookmarks to recognize it?

It's not a big issue though, it's just not as pretty in my bookmarks as other sites.