130

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

4

6 回答 6

224

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

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

  1. 制作徽标的方形图像（最好是 32x32 或 16x16 像素，据我所知没有最大尺寸*），然后将其转换为.ico文件。您可以在 Gimp、Photoshop（借助插件）或Favicon.cc或RealFaviconGenerator等网站上执行此操作。

  2. 然后，您有两种设置方法：

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

    或者

    B）在您网站上每个文件的<head></head>标签之间链接到它，如下所示：.html

    <head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

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

*：甚至没有文件大小限制的浏览器问题。您可以轻松地使浏览器与一个非常大的 favicon 崩溃，更多信息在这里

于 2013-10-15T21:00:23.717 回答
25

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

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

<link rel="icon" href="/your_path_to_image/favicon.jpg">
于 2016-08-14T04:48:22.043 回答
12

这是图标，并在链接中进行了说明。

例如来自 W3C

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

另外，当然图像文件在适当的位置。

于 2012-07-15T02:41:56.810 回答
3

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

于 2012-07-15T02:42:46.893 回答
3 
<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">
于 2014-07-24T11:48:06.490 回答
0
  1. 添加这个
**<HEAD>**

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

然后运行并享受它

于 2020-09-29T21:56:37.220 回答