我一直在做一个网站，我想在浏览器选项卡上添加一个小图标。
我怎么能在HTML中做到这一点，在代码的哪里，我需要把它(例如头)?我有一个。png徽标文件，我想转换为一个图标。
相关:HTML设置图像浏览器选项卡。
当前回答
上面有很多复杂的解决方案。给我吗?在将图像大小更改为32 x 32像素后，我使用GIMP保存了原始PNG文件的副本。
只是要确保将其保存为*.ico文件并使用
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.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)，让剩余的尺寸由用户代理自动向下采样(这在现代视网膜设备中不应该是问题)。
对于Chrome浏览器显示页面图标(favicon)，您需要从托管服务器检查您的网站，或者您可以在PC上开发和测试您的网站时使用本地主机。
我找到的最好的一个是http://www.favicomatic.com/ 我说最好是因为它给了我最清晰的图标，并且在转换后不需要编辑。 它将生成16x16和32x32的favicons，并引用它们“每一个该死的大小，先生!” 此外，他们的网站看起来很酷，很容易使用。
它们还生成您需要用于它们生成的文件的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" />
我看了前20个左右的谷歌结果，这是迄今为止最好的。
使用工具将png转换为ico文件。你可以搜索“favicon生成器”，你可以找到许多在线工具。 将ico地址与链接标签放在头部: <link rel="快捷图标" href="http://sstatic.net/stackoverflow/img/favicon.ico">
请使用下面的代码在标题部分你的索引文件。
<link rel="icon" href="yourfevicon.ico" />
