HTML 如何为网站添加浏览器选项卡图标（favicon）？

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

如何在 HTML 中执行此操作以及我需要将其放置在代码中的哪个位置（例如标头）？我有一个徽标文件，我想将其转换为图标。.png

相关：浏览器选项卡上的 HTML 设置图像。

分割线

网友回答：

实际上有两种方法可以将网站图标添加到网站。

`<link rel="icon">`

只需将以下代码添加到元素中：<head>

<link rel="icon" href="http://example.com/favicon.png">

大多数浏览器都支持 PNG 网站图标，IE <= 10 除外。为了向后兼容，您可以使用ICO网站图标。

请注意，您不必再在 rel 属性中的图标前面加上快捷方式。从 MDN 链接类型：

链接类型以前经常出现，但这种链接类型是不合格的，被忽略，Web作者不能再使用它。shortcuticon

`favicon.ico`在根目录中

来自另一个 SO 答案（通过 @mercator）：

所有现代浏览器（使用 Chrome 4、Firefox 3.5、IE8、Opera 10 和 Safari 4 进行测试）将始终请求，除非您通过指定了快捷方式图标。favicon.ico<link>

因此，您所要做的就是向您的网站发出返回网站图标的请求。不幸的是，此选项不允许您使用 PNG 图标。/favicon.ico

另请参阅favicon.png与favicon.ico – 为什么我应该使用PNG而不是ICO？

分割线

网友回答：

使用工具将您的 png 转换为 ico 文件。您可以搜索“图标生成器”，您可以找到许多在线工具。

将 ico 地址放在带有 -tag 的中：headlink

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

分割线

网友回答：

我发现的最好的是 http://www.favicomatic.com/
我说最好的，因为它给了我最清晰的网站图标，并且在转换后不需要编辑。
它将在 16×16 和 32×32 生成网站图标，并引用它们“每个该死的大小，先生！
此外，他们的网站看起来很酷并且易于使用。

它们还会生成您需要用于它们生成的文件的 html。

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

我查看了前 20 个左右的谷歌结果，这是迄今为止最好的。

模板简介：该模板名称为【HTML 如何为网站添加浏览器选项卡图标（favicon）？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。