FastAPI中Plotly图表无法加载favicon.ico的问题排查

问题根源 #

Plotly的fig.to_html()方法生成的默认HTML内容中，没有包含引用favicon的<link>标签，即便FastAPI配置了/favicon.ico路由，浏览器也无法自动识别并发起请求（或因返回内容未被解析为标准HTML，导致图标请求逻辑不触发）。

解决方案 #

方案1：手动给Plotly生成的HTML添加favicon标签

修改返回逻辑，在Plotly生成的HTML头部插入favicon引用标签，并通过HTMLResponse返回，确保浏览器正确解析页面结构：

from fastapi import HTMLResponse

# 原Plotly图表生成代码保持不变...

plot_html = fig.to_html(config={'displayModeBar': False})
# 插入favicon引用标签到HTML头部
favicon_link = '<link rel="icon" type="image/png" href="/favicon.ico">'
# 替换<head>标签，注入favicon配置
if '<head>' in plot_html:
    plot_html = plot_html.replace('<head>', f'<head>{favicon_link}')

return HTMLResponse(plot_html)

方案2：嵌入Base64格式的图标（无需依赖路由）

如果不想依赖/favicon.ico路由，可以将图标转为Base64编码直接嵌入HTML，避免额外的HTTP请求：

from fastapi import HTMLResponse
import base64

# 读取本地图标文件并转为Base64编码
with open("static/favicon.png", "rb") as icon_file:
    favicon_base64 = base64.b64encode(icon_file.read()).decode('utf-8')

# 原Plotly图表生成代码保持不变...

plot_html = fig.to_html(config={'displayModeBar': False})
# 生成嵌入式favicon标签
embedded_favicon = f'<link rel="icon" type="image/png" href="data:image/png;base64,{favicon_base64}">'
plot_html = plot_html.replace('<head>', f'<head>{embedded_favicon}')

return HTMLResponse(plot_html)

额外检查项

确保FastAPI已正确挂载静态文件目录（若需通过路由访问静态资源）：

from fastapi.staticfiles import StaticFiles

app.mount("/static", StaticFiles(directory="static"), name="static")

内容的提问来源于stack exchange，提问作者MortenB