Favicon 是完全透明的吗？答案

【问题标题】：Favicon is completely transparent?Favicon 是完全透明的吗？
【发布时间】：2016-04-26 04:15:00
【问题描述】：

有一个缩进表明我的网站图标已加载，但我没有看到网站图标，而是看到了网站图标应该位于的完全空白区域。图像是 38x48，但我也尝试了 32x32。 48x48 大约 10kb，32x32 大约 5kb。这肯定不是一张空白/透明的图片。

这是我在加载 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>

【问题讨论】：

你的网站图标是什么格式的？图标是相当标准的，特别是因为单个图标文件可以包含多种尺寸。
<link rel="icon" type="image/x-icon" href="favicon.ico">
只有当 favicon 与您正在查看的页面位于同一目录中时，该 href 才会起作用。您是否尝试过将其更改为绝对路径或根相对路径？
你检查过控制台是否有错误？
favicon在同一目录下。

标签： html favicon web-standards

【解决方案1】：

对于不同类型的浏览器，网站图标必须具有不同的大小。重要的是每个浏览器的大小都是正确的。您似乎使用的是 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/ -->

希望这有效。

【讨论】：

我希望它有。我添加了“大小”属性，但它不起作用。
调整原始图像的大小并进行实验。
我想你可以把它标记为已解决，然后，根据你的回答。

【解决方案2】：

我自己对此进行了测试，看看我是否可以让它工作。它不适用于名为“index.ico”的 ico 文件但是，当我将 ico 文件重命名为“favicon.ico”时，它确实有效。如果这不起作用，您还可以尝试使用其他文件格式。无论名称如何，PNG 和 JPG 都对我有用。

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

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

【讨论】：

奇怪的是，问题自己解决了。我不知道为什么。文档的其他部分可能会干扰，因为我已经编辑了很长一段时间了。

【解决方案3】：

我认为这是一些缓存问题，因为问题会随着时间的推移自行解决。我尝试更改图标，直到经过大量时间后它才会更改。我想了解有关此行为的更多信息并了解它发生的原因。

【讨论】：