如何为网站添加浏览器选项卡图标（favicon）？
我一直在网站上工作，我想在浏览器标签上添加一个小图标。
我怎样才能做到这一点在HTML和代码中我需要放置它（例如标题）？ 我有一个我想要转换为图标的.png徽标文件。
相关：浏览器选项卡上的HTML设置图像。
实际上有两种方法可以为网站添加一个favicon。
<link rel="icon">
只需将以下代码添加到<head>元素：
<link rel="icon" href="http://example.com/favicon.png">
除IE <= 10外，大多数浏览器都支持PNG图标。为了向后兼容，您可以使用ICO图标。
请注意，您不必在rel属性中将icon放在shortcut 。 来自MDN链接类型：
shortcut链接类型通常出现在icon之前，但该链接类型不符合要求，忽略， 网络作者不能再使用它 。
favicon.ico在根目录下
从另一个SO回答（通过@mercator）：
除非您通过<link>指定了快捷方式图标，否则所有现代浏览器（经过Chrome 4，Firefox 3.5，IE8，Opera 10和Safari 4测试）都会请求favicon.ico 。
所以你所要做的就是让你的网站的/favicon.ico请求返回你的图标。 不幸的是，这个选项不允许你使用PNG图标。
另请参阅favicon.png vs favicon.ico - 为什么我应该使用PNG而不是ICO？
将ico地址放在head并加上link -tag：
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
我发现的最好的是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" />
我查看了前20个谷歌的结果，这是迄今为止最好的。
链接地址: http://www.djcxy.com/p/35903.html