如何在Angular中自定义favicon.ico文件的路径？

API 探路者

2026-8-22

解决Angular部署时favicon.ico路径不匹配基础路径的问题

以下几种方法都能搞定你的问题：

用--base-href替代--deploy-url（更推荐）
Angular的--base-href参数会自动处理所有资源的路径前缀，包括favicon.ico。直接执行：
```
ng build --base-href /my-angular-app-name/
```
这样index.html里的js、css、favicon路径都会自动加上/my-angular-app-name/前缀，不用手动修改任何文件。
手动修改index.html里的favicon路径
直接打开src/index.html，把原来的favicon引用：
```
<link rel="icon" type="image/x-icon" href="favicon.ico">
```
改成带基础路径的版本：
```
<link rel="icon" type="image/x-icon" href="/my-angular-app-name/favicon.ico">
```
注意如果后续执行ng build时index.html被框架重新生成，可能需要重新改，所以更推荐前一种方法。
在angular.json里全局配置路径
不想每次build都敲参数的话，打开项目根目录的angular.json，找到你的项目配置，在build的options里添加baseHref和deployUrl：
```
"projects": {
  "你的应用名称": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/my-angular-app-name/",
          "deployUrl": "/my-angular-app-name/"
        }
      }
    }
  }
}
```
之后直接执行ng build就会自动应用这些路径设置。
把favicon移到assets目录
把favicon.ico放到src/assets文件夹下，然后在src/index.html里修改引用为：
```
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
```
再配合--base-href或者angular.json的配置，这个路径会被自动加上基础前缀，也能正常访问。