码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-09 13:49:08      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:web   pre   lin   网页   www   link   log   color   code   

随便打开一个网页:比如 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.icotype="image/x-icon" />

 <link rel="shortcut icon" href="http://host/favicon.icotype="image/x-icon" />

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

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

 

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

标签:web   pre   lin   网页   www   link   log   color   code   

原文地址:http://www.cnblogs.com/jerrypro/p/6830079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!