如何为网站添加浏览器标签图标(favicon) ?

我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。

我怎么能在HTML中做到这一点，在代码的哪里，我需要把它(例如头)?我有一个。png徽标文件，我想转换为一个图标。

相关:HTML设置图像浏览器选项卡。

当前回答

对于Chrome浏览器显示页面图标(favicon)，您需要从托管服务器检查您的网站，或者您可以在PC上开发和测试您的网站时使用本地主机。

2013-04-20 00:03:35

其他回答

HTML标准的链接rel=icon

为了完整起见，这个标准是这样写的:https://html.spec.whatwg.org/multipage/links.html#rel-icon

The icon keyword may be used with link elements. This keyword creates an external resource link. The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface. [...] The following snippet shows the top part of an application with several icons. <!DOCTYPE HTML> <html lang="en"> <head> <title>lsForums — Inbox</title> <link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> <link rel=stylesheet href=lsforums.css> <script src=lsforums.js></script> <meta name=application-name content="lsForums"> </head> <body> ... For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, the rel attribute's entire value must be an ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and no other ASCII whitespace).

2020-07-19 13:07:19

<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

请允许我为那些仍然困惑的人解释清楚。.ico文件往往比.png文件提供更多的透明度，这就是为什么我建议在这里转换你的图像如上所述: http://www.favicomatic.com/done 另外，在href中只是图像的位置，它可以是任何服务器的位置，记住在前面添加http://，否则它将不起作用。

2017-08-14 22:02:55

使用工具将png转换为ico文件。你可以搜索“favicon生成器”，你可以找到许多在线工具。将ico地址与链接标签放在头部: <link rel="快捷图标" href="http://sstatic.net/stackoverflow/img/favicon.ico">

2011-02-03 16:01:46

上面有很多复杂的解决方案。给我吗?在将图像大小更改为32 x 32像素后，我使用GIMP保存了原始PNG文件的副本。

只是要确保将其保存为*.ico文件并使用

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

上面列出的

2015-07-21 19:12:44

我没有用过其他的，但https://realfavicongenerator.net/似乎是首选，这里还没有提到它。

它支持svg作为生成favicons的源图像，并提供了用于覆盖不同平台的图像的有用选项。此外，默认情况下，它不会生成大量的图像来向后兼容每个过时的平台。相反，它提供了一些选项来检查是否需要它们。

从开发者发给我的邮件来看，他们还计划增加对生成SVG favicons的支持，以及SVG主题敏感性，我认为这是一个非常棒的功能。

2020-01-03 20:12:01

如何为网站添加浏览器标签图标(favicon) ?

推荐文章

最新文章

标签