如何为网站添加浏览器选项卡图标(favicon)?

  • 回答 (2)
  • 关注 (0)
  • 查看 (197)

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

我怎样才能做到这一点在HTML和代码中我需要放置它(例如标题)?我有一个.png标志文件,我想转换为图标。

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

khghjgj3khghjgj3提问于
HKC

红客学院 · 创始人 (已认证)

道可道 非常道 名可名 非常名回答于

发现的最好的是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="&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" />
心愿回答于

使用工具将你的PNG转换为ico文件。你可以搜索“favicon generator”,你可以找到许多在线工具。

将ico地址放在head带有link-tag的地方:

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

扫码关注云+社区

领取腾讯云代金券