网站图标无法显示

Question

网站图标无法显示

4

我有一个网站，我试着制作一个网站图标。唯一的问题是，它没有显示出来。在我的本地主机上，它只显示一个云形图标，在使用HTML文件打开的页面上，所有没有网站图标的页面都只显示普通的白色页面。

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

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

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

- Fulgut98

你使用的是哪个浏览器？提醒一下：Chrome浏览器不会在URL旁边显示网站图标，它会在选项卡中显示页面标题旁边。 - basher

使用 favicon.ico 作为文件名。这是浏览器请求的标准。 - ojovirtual

另外需要注意的是，网站图标通常会被缓存得非常彻底，可能需要更多的操作才能刷新出来。建议尝试清除浏览器缓存。 - Mike

4个回答

1

我可以不写任何代码就完成这个操作，并且它总是有效的。

只需确保文件格式为png，大小恰好为16X16像素。然后将其重命名为“favicon.ico”，并放置在您网站的根目录中。

您的浏览器将自动获取图标并在需要时使用它。您可能需要在浏览器上使用ctrl+F5以查看效果（它会进行更深入的刷新）。

- Mehdi Sabouri

0

指定网站图标的第一种方法是使用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文件放入您的Web服务器目录中如果它不在根目录中，请在页面的 ... 标签之间添加此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" />

- kamal

0

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

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

清除缓存或使用CTRL+F5刷新页面以避免缓存。

- Prime

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian Fritz · Accepted Answer

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