No Favicon on bookmark bar when bookmarking Firefox Relay site

[ManuelCalidonio]

User report:

_The bookmark url is https://relay.firefox.com/accounts/profile/

The bookmark comes in later and it looks like how it should in the tab of the website

but here it is on my bookmark bar (default no favicon bookmark image)

I have gone ahead and tried bookmarking it again and that image is the result.

here is the console error

here is the network tab

The favicon.ico 404s and then later comes in as favicon.svg as you can see in the network tab at the bottom.

you can even visit https://relay.firefox.com/favicon.ico and see
Not Found
The requested resource was not found on this server._

[lloan]

@Vinnl is there a reason we haven't added a favicon.ico via _document in our project? Or should we take this opportunity to do so?

[Vinnl]

@lloan Hmm, we do refer to a favicon here:

fx-private-relay/frontend/src/components/layout/PageMetadata.tsx

Line 14 in a08091f

<link rel="icon" type="image/svg+xml" href={favicon.src}></link>

It's not a .ico though, but that should not be a problem for modern browsers. I think what might be the problem is that we're importing the favicon image, which means that Next.js compresses it and generates a unique URL so that it can be cached for a long time - but every time we deploy, that URL might change. So a fix might be to refer directly to /favicon.svg, which does exist.

[lloan]

@Vinnl PR to fix the missing resource created. I tested on FF, PRD site, I can add bookmark just fine. But this should address the issue with the 404. #3579