如何为自己的网站安装favicon.ico

Posted 2023-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为自己的网站安装favicon.ico相关的知识，希望对你有一定的参考价值。

参考技术A 您好直接把favicon.ico放在网站根目录即可。在页面源文件的<head></head>标签之间插入<link rel="shortcut icon" href="favicon.ico" />

网站微图标，页标签，favicon.ico

随便打开一个网页：比如 http://www.baidu.com/

可以看到在浏览器的标签头上面显示了一个图标，也就是我们常说的favicon.ico,

由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理，所以还是新建web项目如下：

home.html 代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>home page</title>
    <link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />
</head>
<body>
    home page
</body>
</html>
 

下面两行代码就可以告诉浏览器使用wangyi.ico 作为home.html的图标了：（用第一行就可以有效果了），

<link rel="icon" href="Images/wangyi.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Images/wangyi.ico" type="image/x-icon" />

所以如果你的网站favicon.ico 不起作用，或者是想要让favicon.ico 的兼容性更好，要使用下面几个步骤：

1：检查网站根目录下面的favicon.ico,也就是：http://host/favicon.ico.，而不是http://host/some/favicon.ico.

2：确保<link rel="icon" href="http://host/favicon.ico" type="image/x-icon" />

使用的是http://host/favicon.ico

3：如果你的网站带端口，或者是测试版本的话，那么尤其要注意360等浏览器，它们在请求favicon.ico 的时候会忽略端口号的。

以上是关于如何为自己的网站安装favicon.ico的主要内容，如果未能解决你的问题，请参考以下文章

如何为自己的网站安装favicon.ico标志？

如何为我的网站创建安装文件？

如何为自己的WordPress站点安装SSL证书开启https访问