如何为Heroku应用配置favicon.ico图标？

一、匹配框架确认文件存放位置 #

• Python框架（Flask/Django）：把favicon.ico放在static根目录下，不要放到public或assets（除非你手动修改了静态资源配置路径）。
• Node.js框架（Express）：放到public根目录，同时确保app.js里有静态资源托管配置：app.use(express.static('public'))。

二、HTML引用的标准写法 #

放弃旧的shortcut icon写法，用当前标准格式：

• 直接路径引用（适用于静态页面或已配置好静态目录的框架）：

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

• 模板引擎动态引用（比如Flask的Jinja2）：

<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">

三、Heroku部署必查项 #

1. 确认文件已提交到Git：检查.gitignore，别把static/public文件夹排除，确保favicon.ico在Git仓库里——Heroku只会部署你提交的文件。
2. 本地先验证：在本地启动服务器，直接访问http://localhost:端口号/favicon.ico，能看到图标再部署到Heroku。
3. 清除浏览器缓存：很多时候是浏览器缓存了旧图标，用Ctrl+Shift+R强制刷新，或者用隐私模式测试。

四、问题排查技巧 #

打开浏览器开发者工具（F12）→ 切换到Network标签，刷新页面看favicon.ico的请求：

• 404状态：文件路径不对，检查文件位置和引用路径是否匹配。
• 200状态但不显示：文件格式有问题，确保是标准ICO格式（推荐尺寸16x16、32x32），别把PNG改后缀冒充ICO。

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