使用字体真棒图标作为Favicon

是否可以将图标用作favicon图标？你知道，浏览器选项卡中网站标题旁边出现的小图标吗？

是的。只需使用所需角色截图，剪切所需部分并将其保存为图像（.ico）

现在，您可能需要认真检查每个浏览器支持的格式：

---

如果你的角色是图像或矢量文件，除了IE（因为微软讨厌你）之外，大多数浏览器都可以。否则，您必须首先将它们保存为图像。

任何图像都可以上载到favicon生成器站点，如

或

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

---

为了跨浏览器的兼容性，我建议始终为Favicon使用图像。即使您创建的某些网站仅适用于现代浏览器，也会将您的favicon作品转换为图像。坚持使用相同的流程可以让你少担心一件事

在不转换为图像的情况下，您不可能将direct awesome字体字符用作favicon。您必须将字符转换为图像。

编辑：我建议您使用

---

我已经创建了一个在线字体真棒Favicon生成器来实现这一点

---

请参阅。

我还创建了一个具有Paul Ferrett解决方案中缺少的附加功能的在线解决方案

• favicon live in浏览器预览
• 图标的大小
• 透明图标和背景
• 巨大的图像大小（图标可以根据需要详细显示）
• iconset可以通过github pull请求进行更新
• 更新2017年6月更新至4.7版
• 更新2017年6月模糊搜索和关键字搜索
• 更新2017年9月堆叠图标
• 更新2018年6月更新至Font Aowesome 5.0.13
• 更新至2018年11月更新至字体5.5.0
• 更新日期：2019年4月更新至字体5.8.1
• 2019年4月更新增加了对的支持

---

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

Font-Awesome托管在许多流行的CDN上，使您能够直接链接到各个SVG文件。只需将

元素的

href

URL设置为托管字体库中所需的SVG即可

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

它在Chrome中的外观：

这种方法的一个限制是大多数浏览器不支持更改颜色或修改任何样式属性

Safari如果使用

mask图标

关系和

color

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

彩色书签图标的HTML示例：

它在Safari中的样子：

乘坐火箭：

---

“请注意，如果您的网站是本地的，只有当您将网站上传到web主机时，favicon才会显示在Chrome中。”。这不正确。如果您在本地查看fav图标时遇到问题，请参阅。很好的一个，快速有效+1.需要允许我们定义颜色@Freddy事实上生成器已经具备了这一能力，我只是还没有为它构建UI。使用RGB十六进制颜色值分别为背景和前景传入参数bg和fg。例如，@paul ferrett：有没有办法改变生成的图标的大小？很好的实现。不幸的是，如今仅16x16 favicon是不够的。下载一个包含所有必要字体和大小的zip会很好。但是许可证允许吗？@art solopov是的，它允许-你可以在他们的许可证页面上查看：我已经阅读了OFL，我没有发现任何与更改字体格式或从字形合成图像有关的内容。对不起，如果我遗漏了什么，你能告诉我具体的部分吗？谢谢。对建议截图投了反对票。有许多无损的方法可以实现这一点。@marcogmonteiro如果您访问，您可以将图标下载为.svg文件。大多数浏览器将接受.svg资产作为favicon。如果您需要支持旧版本的IE，可以通过使用Photoshop或Illustrator转换.svg来获得一个干净的光栅资源（例如.png）。@vgoklani如果您有建议，请告诉我：）@eclipse:非常感谢！这帮我省去了很多痛苦。谢谢你这么大的努力，首先有一些注意事项：当我下载图像时，宽度和高度总是1024，应该调整到实际大小。第二：应该写入滑块值的大小，或者可以在数字中设置更好的值。我们使用堆叠图标支持对其进行了增强。PR正在等待审核。我喜欢live tab预览功能！