如何将我的网站徽标作为浏览器选项卡中的图标图像？答案

【问题标题】：How do I put my website's logo to be the icon image in browser tabs?如何将我的网站徽标作为浏览器选项卡中的图标图像？
【发布时间】：2012-07-15 02:40:11
【问题描述】：

浏览器选项卡中页面标题旁边的图片 - 如何在此处链接图片？

【问题讨论】：

【解决方案1】：

该图片名为'favicon'，它是一个小方形.ico 文件，这是网站图标的标准文件类型。您也可以使用.png 或.gif，但您应该遵循标准以获得更好的兼容性。

要为您的网站设置一个，您应该：

制作您的徽标的方形图像（最好是 32x32 或 16x16 像素，据我所知没有最大尺寸*），并将其转换为 .ico 文件。您可以在 Gimp、Photoshop（在 plugin 的帮助下）或 Favicon.cc 或 RealFaviconGenerator 等网站上执行此操作。
那么，你有两种设置方法：

A) 将其放在您网站的 根文件夹/目录 上（index.html 旁边）名称为favicon.ico。

或

B) 在您网站上每个 .html 文件的 <head></head> 标记之间链接到它，如下所示：
```
<head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
```

如果您想从任何网站查看favicon，只需写www.url.com/favicon.ico，您就会（可能）看到它。 Stackoverflow's 图标是 16x16 像素，Wikipedia 是 32x32。

*: 甚至没有文件大小限制的浏览器问题。你可以很容易地让一个带有超大图标的浏览器崩溃，更多信息here

【讨论】：

【解决方案2】：

它被称为“favicon”，您需要将以下代码添加到您网站的header部分。

只需将此添加到<head> 部分。

<link rel="icon" href="/your_path_to_image/favicon.jpg">

【讨论】：

【解决方案3】：

这是favicon，在链接中有说明。

例如来自 W3C

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

另外，当然还有图片文件在合适的地方。

【讨论】：

【解决方案4】：

将名为“favicon.ico”的图标文件添加到您网站的根目录。

【讨论】：

【解决方案5】：

<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

或者你可以使用这个

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">

【讨论】：

【解决方案6】：

**<HEAD>**

  < link rel="icon" href="directory/image.png">

然后奔跑并享受它

【讨论】：