Question

有一个缩进表示我的favicon已加载，但是我没有看到图标，而是看到了一个完全空白的区域，其中的图标应该是。图像是38x48，但我也试过32x32。 48x48大约10kb，32x32大约5kb。它当然不是空白/透明的图像。

这是我在加载 favicon 时看到的内容：

这是我在加载 no favicon 时看到的内容：

你能看出区别吗？我应该看到一张叶子襁褓婴儿脸颊上的图片，上面已经变成了蜂蜜的鸟唾液。

*我认为这是合规的，因为我认为这可能是图像尺寸，尺寸或其他非常麻烦的问题。

这是头脑。我想知道是不是因为我在中国而且W3C可能无法访问....我接下来会尝试怪癖模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <title>...</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    <link rel="icon" type="image/x-icon" href="/index.ico" />
<!-- Style link START -->
    <link rel=stylesheet media="screen" type="text/css" size="48x48" href="screen.css">
<!-- Style link END -->
</head>

Answer 1

对于不同类型的浏览器，Favicons必须具有各种大小。重要的是每个浏览器的大小都是正确的。您似乎正在使用Mozilla，因此请使用以下图像：

16 x 16
32 x 32
48 x 48
62 x 62

全部以像素为单位。这是代码：

<!-- For IE 11, Chrome, Firefox, Safari, Opera -->  
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

希望这有效。

Answer 2

我亲自测试了一下，看看能否让它发挥作用。它不适用于名为＆＃34; index.ico＆＃34;的ico文件。但是，当我将ico文件重命名为＆＃34; favicon.ico＆＃34;时，它确实有效。如果这不起作用，您也可以尝试使用其他文件格式。无论名称如何，PNG和JPG总是对我有用。

还要确保您的ico文件已正确转换，并且您尚未将其重命名为ico文件。有很多转换器可以将其他图像文件转换为ico文件。

编辑：之后我尝试了几个不同的随机名称，它们都有效，除了index.ico

Answer 3

我相信它有一些缓存问题，因为问题会随着时间的推移自行解决。我尝试过更换图标，直到很长一段时间才会改变。我想了解更多有关此行为的信息，并了解其发生的原因。

Favicon是完全透明的？

3 个答案: