我一直在一个网站上工作，我想在浏览器标签中添加一个小图标。
我该如何在HTML中执行此操作以及需要在代码中放置它的位置（例如标头）？我有一个.png徽标文件，希望将其转换为图标。
相关：浏览器标签上的HTML设置图像。
如何为网站添加浏览器标签图标（图标）？
第2127篇《如何为网站添加浏览器标签图标（图标）？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共10个回答
我没有使用过其他任何东西，但是https://realfavicongenerator.net/似乎是一个最佳选择，并且这里还没有提到。
它支持将SVG用作生成Favicon的源图像，并提供有用的选项来覆盖不同平台的图像。另外，默认情况下，它不会生成与每个过时的平台向后兼容的图像。相反，它为您提供了检查是否需要它们的选项。
从开发人员发送给我的电子邮件中，他们还计划增加对生成SVG网站图标以及SVG主题敏感度的支持，我认为这是一个非常棒的功能。
为了使Chrome浏览器显示页面图标（favicon），您需要从托管服务器检查网站，或者在PC上开发和测试网站时可以使用本地主机。
<link rel="shortcut icon"
href="http://someWebsiteLocation/images/imageName.ico">
如果我可以为仍然困惑的你们增加更多的清晰度。.ico文件往往比.png文件具有更高的透明度，这就是为什么我建议如上所述在此处转换图像的原因：http : //www.favicomatic.com/done 也是如此，href内只是图像的位置，它可以是任何服务器位置，请记住在前面添加http：//，否则它将无法工作。
上面有很多复杂的解决方案。为了我？在将图像尺寸更改为32 x 32像素之后，我使用GIMP保存了原始PNG文件的副本。
只要确保将其另存为* .ico文件并使用
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
以上所列
我建议您尝试http://faviconer.com将.PNG或.GIF转换为.ICO文件。
您可以在一个.ICO文件中创建16x16和32x32（用于新的视网膜显示）。
IE和Firefox没有问题
我已经为我的网站成功完成了此操作。
唯一的例外是，SeaMonkey浏览器要求将HTML代码插入您的<head>;中。但是，其他浏览器仍将显示favicon.ico而不插入任何HTML。另外，除IE以外的任何浏览器都可以使用其他类型的图像，而不仅仅是.ico格式。我希望这有帮助。
我已经创建了一个在线Favicon生成器，您可以使用它从Font Awesome Icons中创建Favicon。您可以在浏览器中实时预览创建的图标。
如果您想要其他功能，请随时在此处提交问题或请求请求：)。
我发现最好的是http://www.favicomatic.com/， 我说的最好，因为它给了我最清晰的图标，并且在转换后不需要编辑。它将生成16x16和32x32的收藏夹图标，并引述他们“该死的大小，先生！” 此外，他们的网站看起来很酷，而且易于使用。
它们还会生成您需要用于它们生成的文件的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=" "/>
<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" />
我查看了Google的前20个结果，这是迄今为止最好的。
- 使用工具将png转换为ico文件。您可以搜索“网站图标生成器”，并且可以找到许多在线工具。
head使用-link标签将ico地址放入中：<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
相似问题
问题类别
请在索引文件的标头部分使用以下代码。