storybook [Bug]:在manager-head.html中设置的自定义favicon在Firefox中不显示,

7eumitmz 于 3个月前发布在其他

关注(0)|答案(3)|浏览(25)

描述bug

在manager-head.html中设置的自定义favicon在Firefox中无法显示

重现步骤

报告者使用了这个仓库：https://github.com/CivicDataLab/opub-mono

创建一个.storybook/manager-head.html文件，将以下内容粘贴到其中：

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

在Firefox中访问本地Storybook。图标没有显示。

系统信息

无响应*

其他上下文信息

无响应*

storybook

来源：https://github.com/storybookjs/storybook/issues/21458

3条答案

按热度按时间

2cmtqfgy1#

似乎在Firefox中，通过给sizes属性赋值来显示favicon。

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

这是否是storybook的一个特定问题？

赞(0）回复(0）举报 3个月前

6rvt4ljy2#

我们也可以在Chrome中复现这个问题。在Firefox中，这个bug有时会发生，但通常Firefox会采用manager-head中指定的图标，而不是Storybook中定义的图标。
图标按照以下顺序在构建的index.html文件中进行指定：

<!-- 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">

由于浏览器如何确定哪个图标具有优先级的行为未定义，我们看到不同的浏览器选择不同的图标。

赞(0）回复(0）举报 3个月前

2eafrhcq3#

在最新版本的 Storybook(7.6.12)中，我发现 manager-head.html 不再被支持/使用。
为了使自定义图标正常工作，我执行了以下操作：

删除 manager-head.html(它不再被使用)
创建一个自定义图标的 svg 文件，并将其命名为 favicon.svg
将此 svg 文件放入 public 文件夹中 - 例如 public/favicon.svg
运行 Storybook 并观察图标现在是否反映出你的自定义图标

赞(0）回复(0）举报 3个月前

我来回答

storybook [Bug]:在manager-head.html中设置的自定义favicon在Firefox中不显示,

描述bug

重现步骤

系统信息

其他上下文信息

3条答案

相关问题

热门标签

最新问答