如何让Icecast2（Ubuntu 22.04 LTS环境，版本2.4.4）的网站图标在Web客户端、专属浏览器及PWA中正常显示？

碰到这种图标在不同场景显示不一致的情况太常见了！Chrome的窗口式快捷方式（类PWA模式）不像普通标签页那样只认单个favicon.ico，它需要一套更完整的图标配置才能正常识别。下面是具体的解决步骤：

步骤1：准备全套图标资源 #

你需要生成并准备以下图标及配置文件：

• apple-touch-icon.png（180x180尺寸）
• favicon-32x32.png（32x32尺寸）
• favicon-16x16.png（16x16尺寸）
• safari-pinned-tab.svg（带指定颜色的SVG图标）
• site.webmanifest（Web应用清单文件，用于定义图标、主题色等信息）

把所有这些文件放到Icecast的Web根目录，也就是你之前放favicon.ico的/usr/share/icecast2/web文件夹下。

步骤2：修改Icecast的网页模板 #

Icecast的默认页面是通过HTML模板生成的，你需要找到模板文件并添加图标配置：

1. 打开Icecast的首页模板，一般路径是/usr/share/icecast2/web/index.html（如果找不到，可以检查Icecast配置文件里的<webroot>项确认路径）。
2. 找到文件中的<head>标签区域，把下面的配置代码插入进去：

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

步骤3：重启Icecast服务 #

修改完模板后，必须重启Icecast才能让配置生效，执行以下命令：

sudo systemctl restart icecast2

步骤4：刷新页面并重建快捷方式 #

• 先在普通Chrome标签页刷新Icecast的页面，确保新的图标配置被浏览器加载。
• 之前创建的窗口式快捷方式可能缓存了旧的图标信息，先把它删除，再重新通过Chrome > 更多工具 > 创建快捷方式... > 以窗口方式打开 > 创建的流程生成新的快捷方式。

这样操作后，不管是普通网页标签、Chrome窗口式快捷方式，还是类PWA场景下，Icecast的图标都能正常显示了！

备注：内容来源于stack exchange，提问作者bvargo