[Bug]: Custom favicon set up in manager-head.html does not show up in Firefox

[valentinpalkovic]

Describe the bug

Custom favicon set up in manager-head.html does not show up in Firefox

To Reproduce

The reporter used this repo: https://github.com/CivicDataLab/opub-mono

1. Create a .storybook/manager-head.html file and paste the following content to it:

<link rel="shortcut icon" href="https://www.google.com/favicon.ico">

2. Visit the local Storybook in Firefox. The icon is not shown.

System

No response

Additional context

No response

[yoshi2no]

It seems that the favicon is shown by giving a value to the sizes attribute in Firefox.

<link rel="shortcut icon" href="https://www.google.com/favicon.ico" sizes="192x192" />

Is this a specific issue with storybook?

[JoshTumath]

We can reproduce as well in Chrome. In Firefox, the bug only sometimes happens, but normally Firefox will take the icon specified in manager-head over the one defined by Storybook.

The icons are specified in this order in the built index.html file:

<!-- The icon defined by Storybook -->
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />

<!-- Our icons defined in our manager-head.html -->
<link rel="icon" href="images/favicon-16.png" sizes="16x16">
<link rel="icon" href="images/favicon-32.png" sizes="32x32">
<link rel="icon" href="images/favicon-64.png" sizes="64x64">
<link rel="icon" href="images/favicon-192.png" sizes="192x192">

And due to undefined behaviour as to how browsers should work out which icon takes precedence, we're seeing different browsers choose different icons.

[MikeHewett]

With the latest version of Storybook (7.6.12), I've observed that manager-head.html is no longer honoured / used.

In order to get a custom favicon working, I did the following:

1. remove manager-head.html (its not used anymore)
2. Create an svg of your custom icon and name it favicon.svg
3. put this svg in your public folder - e.g. public/favicon.svg
4. Run Storybook and observe the icon now reflects your custom one

[James-Wilkinson-git]

Also have this issue, manager-head is being injected but storybook is injecting its own favion and cant override it

[herzaso]

I can't seem to override the default favicon in chrome as well. I'm using a png file and have tried setting it through the link tag in manager-head.html, but running it locally, I don't see the new favicon

<link rel="shortcut icon" href="/favicon.png" type="image/png" sizes="16x16" />