Question

是否可以使用Font Awesome图标作为favicon图标？你知道吗，在浏览器标签中出现在网站标题旁边的小图标？

Answer 1

编辑：我建议您使用http://gauger.io/fonticon

我已经创建了一个在线Font Awesome Favicon Generator来做到这一点！

Answer 2

我还创建了一个在线Font Awesome Favicon Generator，其中包含Paul Ferrett解决方案中缺少的其他功能。

如果您想要其他功能，请随时提交问题或提取请求here。

Answer 3

是的，确实如此。只需截取所需字符的截图，剪切所需的部分并将其另存为图像（.ico）。

严肃地说，您可能需要检查每个浏览器支持的格式：http://en.wikipedia.org/wiki/Favicon#File_format_support

如果你的角色是图像或矢量文件，你可以使用大多数浏览器，但IE ~~（因为MS讨厌你）~~。否则，你真的必须先将它们保存为图像。

Answer 4

任何图像都可以上传到favicon生成器网站，例如

或

按照您选择的网站上的在线说明操作。它通常只是一个三步过程。将favicon保存在站点的顶层。

为了跨浏览器兼容，我建议始终使用图像作为favicons。即使您创建的某些网站仅适用于现代浏览器，仍会将您的favicon图稿转换为图片。始终如一地使用相同的过程可以让您少担心。

Answer 5

如果不转换为图像，则无法使用直接可怕的字体字符作为图标。你必须将角色转换成图像..

Answer 6

字体真棒位于许多流行的CDN上，使您可以直接链接到单个SVG文件。只需在托管的 Font Awesome 库中将href元素的<link> URL设置为所需的SVG。

在 jsDelivr 上托管的“火箭”书签图标的HTML示例：

<head>
   <link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14/svgs/solid/rocket.svg>
</head>

Chrome 中的外观：
screenshot

此方法的局限性在于，大多数浏览器不支持更改颜色或修改任何样式属性。

如果您使用mask-icon关系和color属性，则

Safari 支持自定义颜色。如果用户选择了“在标签中显示网站图标” 选项，则彩色书签图标将显示在Safari的固定标签和常规标签上。

颜色书签图标的HTML示例：

<head>
   <link rel=mask-icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14/svgs/solid/rocket.svg color=teal>
</head>

Safari 中的外观：
screenshot