我一直在做一个网站,我想在浏览器选项卡上添加一个小图标。
我怎么能在HTML中做到这一点,在代码的哪里,我需要把它(例如头)?我有一个。png徽标文件,我想转换为一个图标。
相关:HTML设置图像浏览器选项卡。
我一直在做一个网站,我想在浏览器选项卡上添加一个小图标。
我怎么能在HTML中做到这一点,在代码的哪里,我需要把它(例如头)?我有一个。png徽标文件,我想转换为一个图标。
相关:HTML设置图像浏览器选项卡。
当前回答
对于Chrome浏览器显示页面图标(favicon),您需要从托管服务器检查您的网站,或者您可以在PC上开发和测试您的网站时使用本地主机。
其他回答
对于Chrome浏览器显示页面图标(favicon),您需要从托管服务器检查您的网站,或者您可以在PC上开发和测试您的网站时使用本地主机。
我已经成功地为我的网站做到了这一点。
唯一的例外是,SeaMonkey浏览器需要HTML代码插入<head>;然而,其他浏览器仍然会显示favicon.ico,没有任何HTML插入。此外,除IE之外的任何浏览器都可能使用其他类型的图像,而不仅仅是.ico格式。我希望这能有所帮助。
通过在Apache的.htaccess文件[或Nginx的等效文件]中重命名/翻译每个HTTP请求,你可以让~所有浏览器发现一个favicon.png文件,如下所示:
# Universal favicon
RewriteRule ^(?:fav|apple-touch-)icon.*\.(?:ico|png)$ favicon.png [L]
然后,你唯一需要做的就是将这一行添加到HTML代码的头部部分:
<link rel="icon" href="favicon.png">
关于图像尺寸,我会使用我的webapp所期望的最高尺寸(例如Android的192px),让剩余的尺寸由用户代理自动向下采样(这在现代视网膜设备中不应该是问题)。
使用工具将png转换为ico文件。你可以搜索“favicon生成器”,你可以找到许多在线工具。 将ico地址与链接标签放在头部: <link rel="快捷图标" href="http://sstatic.net/stackoverflow/img/favicon.ico">
我没有用过其他的,但https://realfavicongenerator.net/似乎是首选,这里还没有提到它。
它支持svg作为生成favicons的源图像,并提供了用于覆盖不同平台的图像的有用选项。此外,默认情况下,它不会生成大量的图像来向后兼容每个过时的平台。相反,它提供了一些选项来检查是否需要它们。
从开发者发给我的邮件来看,他们还计划增加对生成SVG favicons的支持,以及SVG主题敏感性,我认为这是一个非常棒的功能。