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

Posted 2023-04-16

tags:

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

浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件，如果没有，便到网站的根目录下寻找。
　　因此，在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico，然后将其上传到网站的根目录即可。
　　如果您需要将Favicon.ico放到其他目录下，或者希望让不同的网页显示不同的Favicon，就需要在网页html文件中做设定了，具体设置也很简单，在Html中的＜head＞部分加入如下的代码：
　　程序代码: <link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
　　<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
　　Firefox还支持GIF动画格式的Favicon,使用方法如下:
　　首先制作一个16*16的gif动画,然后在html代码<head></head>中加入如下代码:
　　程序代码 <link rel="shortcut icon" href="favicon.ico" >
　　<link rel="icon" href="animated_favicon.gif" type="image/gif" > 参考技术A 首先使用制图工具制作32X32（最佳）的标志，可保存成gif、jpg格式，完成后打开该网站http://www.bitbug.net/提交图片自动生成ico格式文件。
如何安装Favicon
当成功生成favicon.ico图像文件后,浏览器会自动弹出一个zip的压缩文件
将压缩文件中的favicon.ico图像放在根目录下(也可以是其他目录)
在页面源文件的<head></head>标签之间插入
<link rel="shortcut icon" href="favicon.ico" /> 该段

最后形成:
<head>
...
<link rel="shortcut icon" href="favicon.ico" />
</head> 参考技术B 设计一个名称favicon.ico的图像文件放到网站根目录，就可以了。为了更好的兼容性，可以在header添加如下的META申明：
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon"　/>
</head>

网站微图标，页标签，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.