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

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

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

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

当前回答

使用工具将png转换为ico文件。你可以搜索“favicon生成器”，你可以找到许多在线工具。将ico地址与链接标签放在头部: <link rel="快捷图标" href="http://sstatic.net/stackoverflow/img/favicon.ico">

2011-02-03 16:01:46

其他回答

我找到的最好的一个是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个左右的谷歌结果，这是迄今为止最好的。

2015-01-19 17:14:26

HTML标准的链接rel=icon

为了完整起见，这个标准是这样写的:https://html.spec.whatwg.org/multipage/links.html#rel-icon

The icon keyword may be used with link elements. This keyword creates an external resource link. The specified resource is an icon representing the page or site, and should be used by the user agent when representing the page in the user interface. [...] The following snippet shows the top part of an application with several icons. <!DOCTYPE HTML> <html lang="en"> <head> <title>lsForums — Inbox</title> <link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> <link rel=stylesheet href=lsforums.css> <script src=lsforums.js></script> <meta name=application-name content="lsForums"> </head> <body> ... For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, the rel attribute's entire value must be an ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and no other ASCII whitespace).

2020-07-19 13:07:19

上面有很多复杂的解决方案。给我吗?在将图像大小更改为32 x 32像素后，我使用GIMP保存了原始PNG文件的副本。

只是要确保将其保存为*.ico文件并使用

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

上面列出的

2015-07-21 19:12:44

我建议您尝试http://faviconer.com将您的。png或。gif转换为。ico文件。

您可以在一个. ico文件中创建16x16和32x32(用于新的视网膜显示)。

IE和Firefox没有问题

2013-12-13 04:42:21

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

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

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

2020-01-03 20:12:01

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

推荐文章

最新文章

标签