图标未显示

Question

我有一个网站，我正在尝试制作网站图标。唯一的问题是，它没有出现。在我的本地主机上，它只显示一个云的东西，在使用 html 文件打开的页面上，它只显示所有站点上的常规白页，没有图标。

这就是我尝试实现它的方式。

<link rel="icon" type="image/icon" href="http://www.mywebsite.com/myfavicon.ico"/>

<link rel="stylesheet" type="text/css" href="mainColorTest.css" />

Answer 1

如果可以的话，只需将您的图标文件重命名为 favicon.ico 并将其放在您网站的根目录 URL 中，即 http://www.mywebsite.com/favicon.ico -- 看起来您可以访问到那个。之后，您无需在 html 中添加任何内容，浏览器会自动找到它。

Answer 2

我没有写一行代码就这样做了，而且它总是有效。

只需确保文件格式为png，并且正好16X16 pixels。然后将其重命名为 'favicon.ico' 并将其放在您网站的根目录中。

您的浏览器将自动获取图标并在需要的地方使用它。可能需要在浏览器上使用ctrl+F5才能看到效果，（刷新更深）

Answer 3

指定网站图标的第一种方法是使用 rel 属性值 "icon" 并通过配置文件定义该值的含义；下面将更详细地讨论配置文件。在此 HTML 4.01 示例中，通过 URI http://example.com/myicon.png 识别为网站图标的网站图标：

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

XHTML 1.0 版本看起来非常相似：

<!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-US"
      lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="/somewhere/myicon.png" />
[…]
</head>
[…]
</html>

如果你使用的是HTML 5....那么它会是这样的：

下载图标将 favicon.ico 文件放入您的网络服务器目录如果它不在根目录中，请在页面的 ... 标签之间添加此 HTML 片段：

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

用正确的路径替换YOUR_PATH - 或 -

在页面的 ... 标记之间添加此 HTML 代码段。整个图像文件已包含在 HTML 中。无需上传 favicon.ico 文件。这适用于除 Internet Explorer 之外的所有浏览器。

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAAy8vLAAEDAAAROkkABAAAAAACBgAFAwAAIVJsALOliAAFAwkAT/T3AJTK/wAcTewAsOzvAB5I7wAfTuYA0LeiAHr6/wAnU+MAJ1HmABtHVQDHgAAA6+b3AMh9CQDm9/QA3d3dACNMWwArVfsA+e3oAO/w+gB+dHYAAAABAPLz8QA8X28ALmbmAPP09AAAAgcABAABAPT09ADg3eYABQABAEvy+wBNeY8AAQIQAAcACgD3+foAAAsQAOHn8gA8a+wA/f39AF/1+wAsUecAYfX7ADBfcAAkRlMA7+/vAL2yngDu8/IAbPT4AMC0mwDKysoAAAACAAEAAgArY/AAAAUIAAMEBQCJfmgAxLunALamjQD8/PsA+v3+AKjK7wAzWmsAau/zAO/o9gAGPUwAOv36AKfY/gAAAAMAxNXIAAACAADDtJwAAQMDADJp6AAJAgkABAUSACRO4AATSFIAvKWLAJF+aQD8/PwA/vz8AKWafQAgUfsAm5ubACFEWAApT/UAv+/yAOzu7gCj1PwAvbCaACBf+ADv8/QAAAAEALHS/wAGAAQABgIBAC5q7AAHAgEAHk3eAPf39wDN9/gAmc3xAAcHBwDp6ekAGUdZAJOEagAdS1MAL0ztAC1U6gC4s6QANU3nAAACAgCwn40AttfrABVN6AAtYfYAsqGKAAQCAgAHAAUAn87jAFd3jQC7pocA+fv7APv7+wCmvP4AJUzuANbW1gCampoA3vb/ANr//wAkR1EAv7KZAKyihQCas/YAAAEAAAAEAAAAAAYAAAUDAAQBAACupogAHUfgAAUBAAAACgAABwEAAAEECQAHBAAA8/v8ACJI7AD4+/wAzfv9ABhBUgAsReMA/vr5ACNR7ADm5PcAGEZYAB1EUgD///8ALE7sAGH2+gAoY/UA9/DuAAEBAQCwooYAAwIEAAAIBAAwYvIAGkjtAOPj4wAJBQQAHU/nAAgJBwAVRFMAH2FzAAwIBAD++P0AJVPhAP77/QDV1dUApKCBAGLz+wAfRFwAZfX4ABgLDQApVP8ARniKAMK1mwDv9/IAAAECAAMBAgC2oYQABwECAJqQfwDf6vAA5urnAP7+/gDg8vYA//7+AChU5QCdh24AwvX3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqDFyiQAqB3M+X06IJBlaqKg8XooAoaaNyrASXW2ST6gxAYpeAIM1Hpl5DH6rMFDOqM6zvQC+0lnDh8wYJ2XRZ6jOMaitxLi/YH27a4sipJOoqIZxrVgQf56sSs0ckA+Tzm6bdEI7OMu1pVaxP1MbkzeTfENkUZUoEy8WHWbPopMJp0jHtrkLgrIzqQ52d5cfVzaTugCdFWhNFy1jJWmBAMg9xiMAr4AhVZxBwFSfRs5bqJTCdbcDSQpLFBooeryo0ECgKxHBOqoyNClMLHAAqJFhb5p4j5YIhMlcewJHDa2t01IgtI7Fxa6uRAaFLoytqAWjYiZsbGpqmASoOUUAqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" rel="icon" type="image/x-icon" />

Answer 4

保留这样的东西 "favicon.ico" 浏览器很聪明，它们会在不提及的情况下加载您的网站图标 URL。

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

删除缓存或使用 CTRL+F5 刷新没有缓存的页面。

图标未显示

Favicon isn't showing

html

favicon