使用Font Awesome Icon作为Favicon
Con*_*ack 97 favicon font-awesome
是否可以使用Font Awesome图标作为favicon图标？你知道,浏览器标签中出现在网站标题旁边的小图标吗？
Pau*_*ett 263
我已经创建了一个在线Font Awesome Favicon Generator来做到这一点!
请参阅Font Awesome Favicon Generator.
- 这应该是正确答案:) (8认同)
- 很好,快速有效.+1! (7认同)
- @ paul-ferrett:有没有办法改变生成图标的大小？ (7认同)
- @Freddy实际上生成器已经能够做到这一点,我只是没有为它构建UI.使用RGB HEX颜色值分别将params bg和fg传递给背景和前景.例如,http://paulferrett.com/fontawesome-favicon/generate.php？icon = heart&bg = FFFDDB&fg = FA3C3C (6认同)
- 很好的实施.不幸的是现在只有16x16的图标是不够的.很高兴下载一个包含所有必要尺寸的所有必需品的拉链. (4认同)
- 需要让我们定义颜色! (2认同)
ecl*_*pse 71
我还创建了一个在线Font Awesome Favicon Generator,它具有Paul Ferrett解决方案中缺少的其他功能.
- favicon的预览直播在浏览器中
- 图标的大小
- 透明的图标和背景
- 巨大的图像大小(图标可以像你想要的那样详细)
- iconset可以通过github pull请求更新
- 更新06/2017更新至Font Awesome 4.7
- 更新06/2017模糊搜索和关键字搜索
- 更新09/2017堆积的图标
- 更新06/2018更新到Font Awesome 5.0.13
- 更新11/2018更新到Font Awesome 5.5.0
如果您需要其他功能,请随时在此处提交问题或拉取请求.
- 我喜欢实时标签预览功能! (2认同)
Ren*_*nan 36
是的.只需截取具有所需字符的截图,剪切所需的部分并将其另存为图像(.ico).
严肃地说,您可能想要检查每个浏览器支持的格式:http://en.wikipedia.org/wiki/Favicon#File_format_support
如果你的角色是图像或矢量文件,你可以使用大多数浏览器而不是IE (因为MS讨厌你).否则,你真的必须先将它们保存为图像.
- 许可证是否允许？ (3认同)
- @ art-solopov是的,确实如此 - 您可以在他们的许可页面上查看:http://fortawesome.github.io/Font-Awesome/license/ (3认同)
- @marcogmonteiro 如果您访问 https://fontawesome.com/download，您可以将图标下载为 .svg 文件。大多数浏览器都会接受 .svg 资源作为图标。如果您需要支持旧版本的 IE，您可以通过使用 Photoshop 或 Illustrator 转换 .svg 来获得干净的栅格资源（例如 .png）。 (3认同)
oth*_*ewi 11
任何图像都可以上传到favicon生成器站点,例如
要么
按照您选择的网站上的在线说明进行操作.它通常只是一个三步过程.将favicon保存在站点的顶层.
为了跨浏览器兼容,我建议始终使用图像作为favicons.即使您创建的某些网站仅适用于现代浏览器,仍会将您的favicon图稿转换为图片.始终如一地使用相同的过程可以让您少担心.
- "请注意,如果您的网站是本地网站,则只有当您将网站上传到网络托管服务商时,才会在Chrome中显示图标." 那不对. (2认同)
Dem*_*ian 11
Font Awesome托管在许多流行的 CDN 上，使您能够直接链接到单个 SVG 文件。只需在托管的Font Awesome库href中将<link>元素的URL设置为所需的 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 中的样子：
乘坐火箭：https :
//centerkey.com/files/rocket.html
| 归档时间： |
|
| 查看次数： |
46870 次 |
| 最近记录： |