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

浏览器标签页面标题旁边的图片 – 如何链接图片？

该图像被称为“ favicon ” ，它是一个小方形的.ico文件，这是favicon的标准文件types。您也可以使用.png或.gif ，但您应该遵循标准以获得更好的兼容性。

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

制作一个方形图片（最好是32×32或16×16像素，据我所知没有最大尺寸*，并将其转换为.ico文件。您可以在Gimp，Photoshop（借助插件）或网站像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的 favicon是16×16像素，维基百科是32×32，而crafstud.io是128×128。

*：甚至有没有文件大小限制的浏览器问题。你可以很容易地崩溃浏览器与一个非常大的图标，更多信息在这里

它被称为“ 图标 ”，您需要将下面的代码添加到您网站的标题部分。

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

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

这是favicon，并在链接中解释。

例如来自W3C

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

另外，当然图像文件在适当的地方。

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

 <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">