html 你必须包括吗< link rel="icon" href="favicon.ico" type="image/x-icon" />?

a2mppw5e  于 2023-04-18  发布在  其他
关注(0)|答案(7)|浏览(190)

我没有在我的head标签中包含以下代码行,但是我的favicon仍然显示在我的浏览器中:

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

包含它的目的是什么?

km0tfn4u

km0tfn4u1#

如果你不调用favicon,favicon.ico,你可以使用这个标签来指定实际的路径(如果你在images/目录中有它)。浏览器/网页默认在根目录中查找favicon.ico

1yjd4xko

1yjd4xko2#

事实上,您应该同时执行这两项操作,以便所有浏览器都能找到该图标。
将文件命名为“favicon.ico”并将其放在网站的根目录中是W3C“不鼓励”的方法:
方法2(气馁):将favicon放置在预定义的URI处
用于指定favicon的第二种方法依赖于使用预定义的URI来标识图像:“/favicon”,它是相对于服务器根目录的。这个方法之所以有效,是因为一些浏览器已经被编程为使用该URI来查找favicon。
W3C - How to add a favicon to your site
因此,为了涵盖所有情况,除了推荐的添加“rel”属性并将其指向同一个.ico文件的方法之外,我总是这样做。

a7qyws3x

a7qyws3x3#

我使用它有两个原因:
1.我可以通过添加一个查询参数来强制刷新图标,例如?v=2。如下所示:<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" />
1.如果我需要指定路径。

vu8f3i0k

vu8f3i0k4#

简单地将其添加到根文件夹后的时尚工程,但我发现,如果我需要改变的favicon,它可能需要几天的更新...甚至缓存刷新不做的伎俩。

xnifntxz

xnifntxz5#

许多人将他们的cookie路径设置为/。这将导致每个favicon请求发送一个网站cookie的副本,至少在chrome中是这样。将您的favicon寻址到您的无cookie域应该可以纠正这一点。

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

根据您获得的流量,这可能是添加链接的最实际原因。
关于设置无cookie域的信息:
http://www.ravelrumba.com/blog/static-cookieless-domain/

qojgxg4l

qojgxg4l6#

你不需要一个16x16的“favicon.ico”。使用HTML <link>元素嵌套在你的<head>元素中。Web浏览器将使用非常小的图像,但Google requires and supports在搜索结果中显示它们的图像大小是48像素的倍数。
您的favicon必须是48px正方形的倍数,例如:48x48px,96x96px,144x144px等。SVG文件没有特定的大小。支持任何有效的favicon格式。
顺便说一句,在显示logo in search results from structured data方面,他们希望至少112px的图像。
所以,下面是我使用的favicons:

<link rel="icon" type="image/png" href="../media/favicon-336x336.png" sizes="336x336">
<link rel="icon" type="image/png" href="../media/favicon-288x288.png" sizes="288x288">
<link rel="icon" type="image/png" href="../media/favicon-240x240.png" sizes="240x240">
<link rel="icon" type="image/png" href="../media/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="../media/favicon-144x144.png" sizes="144x144">
<link rel="icon" type="image/png" href="../media/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="../media/favicon-48x48.png" sizes="48x48">
mwecs4sa

mwecs4sa7#

使用ctrl + shift del清除你的浏览器缓存或历史

相关问题