如何在Yew.rs框架中为网站添加favicon.ico图标？

以下是几种可行的解决方式，按需选择：

1. 基础文件位置与HTML配置 #

• 将favicon.ico放在项目根目录（和Cargo.toml、index.html同级），Trunk构建工具会自动同步根目录的静态资源到输出目录。
• 修改index.html的<head>标签，补充type属性并使用绝对路径：

<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>

2. 通过Yew组件直接注入 #

如果不想手动修改index.html，可以在根组件的视图中直接注入图标配置：

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <>
            <head>
                <link rel="icon" type="image/x-icon" href="/favicon.ico" />
            </head>
            <main>
                // 你的页面内容
            </main>
        </>
    }
}

3. 自定义静态资源目录（Trunk配置） #

如果图标放在static这类子目录中，需要在Trunk.toml里配置静态资源路径：

[assets]
public_dir = "static"

配置后，static/favicon.ico会被复制到输出根目录，依然可以用/favicon.ico作为引用路径。

验证步骤 #

• 执行trunk build或trunk serve后，检查dist目录下是否存在favicon.ico；
• 用Ctrl+Shift+R强制刷新浏览器，清除旧缓存后查看图标是否显示。

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