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

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

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


当前回答

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

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

其他回答

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

< =“icon”铁路链接>

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

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

大多数浏览器都支持PNG格式的favicons,除了IE <= 10。为了向后兼容,您可以使用ICO favicons。

注意,你不再需要在rel属性的图标前面加上快捷键了。来自MDN链路类型:

快捷链接类型经常出现在图标之前,但这种链接类型是不符合要求的,被忽略了,web作者不能再使用它了。

根目录下的Favicon.ico

来自另一个SO答案(@mercator):

所有现代浏览器(在Chrome 4、Firefox 3.5、IE8、Opera 10和Safari 4上进行了测试)总是会请求favicon.ico,除非你通过<link>指定了一个快捷图标。

你所要做的就是让/favicon。ico请求返回你的favicon。不幸的是,这个选项不允许你使用PNG图标。

另见favicon.png vs favicon.ico -为什么我应该使用PNG而不是ICO?

我已经成功地为我的网站做到了这一点。

唯一的例外是,SeaMonkey浏览器需要HTML代码插入<head>;然而,其他浏览器仍然会显示favicon.ico,没有任何HTML插入。此外,除IE之外的任何浏览器都可能使用其他类型的图像,而不仅仅是.ico格式。我希望这能有所帮助。

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

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

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

对于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="&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个左右的谷歌结果,这是迄今为止最好的。