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

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

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

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

  1. 制作一个方形图片(最好是32×32或16×16像素,据我所知没有最大尺寸*,并将其转换为.ico文件。您可以在Gimp,Photoshop(借助插件 )或网站像Favicon.cc或RealFaviconGenerator 。

  2. 然后,你有两种方法来设置它:

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