是否可以使用Font Awesome图标作为 favicon 图标？你知道，浏览器标签中出现在网站标题旁边的小图标吗？
问问题
65898 次
6 回答
330
于 2015-02-10T08:47:57.467 回答
96
我还创建了一个在线Font Awesome Favicon Generator，它具有 Paul Ferrett 的解决方案中缺少的附加功能。
- 在浏览器中实时预览图标
- 图标的大小
- 透明图标和背景
- 巨大的图像尺寸（图标可以像你想要的那样详细）
- 图标集可以通过 github pull request 更新
- 更新 06/2017更新到 Font Awesome 4.7
- 更新 06/2017模糊搜索和关键字搜索
- 更新 09/2017堆叠图标
- 更新 06/2018更新到 Font Awesome 5.0.13
- 更新 11/2018更新到 Font Awesome 5.5.0
- 更新 04/2019更新到 Font Awesome 5.8.1
- 更新 11/2021更新到 Font Awesome 5.15.4
如果您想要其他功能，请随时在此处提交问题或拉取请求。
于 2016-09-08T18:26:13.213 回答
46
方法一
- 只需访问fontawasome 画廊。
- 现在搜索并打开您需要的图标，即编辑图标。
- 如给定图像所示，单击下载 svg。
- 现在您可以在您的网站中将此 svg 文件用作 favicon，请参阅如何设置 favicon。
方法二
用所需字符截取某些内容，剪切所需部分并将其保存为图像 (.ico)。
现在说真的，您可能需要检查每个浏览器支持的格式：http ://en.wikipedia.org/wiki/Favicon#File_format_support
如果您的字符是图像或矢量文件，那么大多数浏览器都可以，但 IE （因为 MS 讨厌您）。否则，你真的必须先将它们保存为图像。
于 2013-08-09T21:59:32.513 回答
12
Font Awesome托管在许多流行的 CDN 上，使您能够直接链接到各个 SVG 文件。只需在托管的Font Awesome库href中将元素的 URL设置<link>为所需的 SVG 。
托管在jsDelivr上的“火箭”书签图标的示例 HTML ：
<head>
<link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/svgs/solid/rocket.svg>
</head>
它在Chrome中的样子：
这种方法的一个限制是大多数浏览器不支持更改颜色或修改任何样式属性。
如果您使用mask-icon关系和color属性， Safari支持自定义颜色。如果用户选择了“在选项卡中显示网站图标”选项，彩色书签图标将显示在 Safari 的固定选项卡和常规选项卡上。
彩色书签图标的 HTML 示例：
<head>
<link rel=mask-icon color=teal
href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/svgs/solid/rocket.svg>
</head>
它在Safari中的样子：
于 2020-08-29T10:23:22.273 回答
11
任何图像都可以上传到网站图标生成器站点，例如
或者
按照您选择的网站上的在线说明进行操作。它通常只是一个三步过程。将网站图标保存在您网站的顶层。
为了跨浏览器的兼容性，我建议始终使用图片作为网站图标。即使您创建的某些网站仅适用于现代浏览器，仍然会将您的网站图标图稿转换为图像。始终如一地使用相同的过程可以让您少担心一件事。
于 2013-08-09T22:22:33.973 回答
7
您不可能在不转换为图像的情况下直接使用真棒字体字符作为网站图标。您必须将字符转换为图像..
于 2014-01-27T08:12:11.763 回答