☰

如何为 Icecast2/ubuntu 网络客户端/特定站点浏览器/PWAs 显示正常工作的网站图标

tag-icon • tag-icon html xml favicon icecast
如何为 Icecast2/ubuntu 网络客户端/特定站点浏览器/PWAs 显示正常工作的网站图标

Ubuntu 22.04 LTS 上的 Icecast 2.4.4：我将一个 favicon.ico 放在 /usr/share/icecast2/web 中，它显示在 Chrome 的标签栏中，但它无法正确显示在由 Chrome > 更多工具 > 创建快捷方式... > 作为窗口打开 > 创建生成的网页窗口上。事实上，它显示为一个灰色框，里面有一个“I”（无疑是 Icecast2 的缩写）。我创建了一堆 favicon 和一些代码[1]realfavicongenerator.net

[1]: 在您的页面部分插入以下代码：

<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"

答案1

从我所能锻炼的内容来看：

  1. 获取要创建的图标的大文件；例如，对于 Icecast2，我使用了这1,200 px × 1,360 px .p​​ng 图片来自维基百科。（最好使用 .svg 图片；（2）中的网站指出，“提交图片（PNG、JPG、SVG...），至少 70x70。为获得最佳效果，您的图片应为 260x260 或更大。”）

  2. 创建一个 favicon 包，例如，https://realfavicongenerator.net/[*]

  3. 解压 favicon 包（例如，favicon_package_v0.16.zip）到/usr/share/icecast2/web（可能工作于/etc/icecast2/web)

  4. sudo nano /etc/icecast2/icecast.xml 文件在 <http-headers> 部分包含以下内容：

    <header name="icon" value="/usr/share/icecast2/web/favicon.ico" />
<header name="icon" value="/usr/share/icecast2/web/favicon-32x32.png" />
<header name="icon" value="/usr/share/icecast2/web/favicon-16x16.png" />

  5. 清除 Chrome 中的缓存图像和文件：[chrome://settings/clearBrowserData] 以更新图标。

  6. 创建 SSB/Open-as-window 快捷方式：Chrome⋮ > 更多工具 > 创建快捷方式... > ☑ Open-as-window。

我不知道 OP 中其余的 RFG 代码是做什么的，因为我在 chrome 标签栏中有一个正确的图标和在 chrome SSB 快捷方式窗口中和在操作系统（Ubuntu 22.10）状态栏中，我有一个用于桌面的功能设置。

[*]：RealFavicon 生成器在本文中被引用Stack Overflow 帖子作者phillippe-b。

之后（在 Chrome 中）： Chrome Icecast SSB 上的工作图标

[注：Google Voice 和 Gmail 的 SSB 图标]

之前（在 Chrome 和 FF 中）：

Chrome 和 FF 中无法正常工作的图标

相关内容