【HTML&CSS】【7】网址栏左侧出现的图标Icon

正文：

1，网址栏左侧出现的图标Icon，就是截图中的小图标

2，方案

<link rel="shortcut icon" href="http://example.com/favicon.ico"><link rel="icon" href="http://example.com/favicon.ico">

只有第一行是必须的，大部分浏览器是识别"icon"，IE是识别"shortcut icon"。

只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。

3，图标不显示的可能原因及解决方案，自己多尝试一下

（1）加上，type="image/x-icon"，即<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

（2）对于XHTML，link必须使用“ />”结束（或“></link>”），而不可以使用“>”结束

（3）确定这个文件真的是 ico 格式而不只是其他图片格式重命名了下（直接重命名，IE11，chrome都可以，但IE9不可以）

（4）可能是因为 url 不是根路径所以没显示出来，href="images/favicon.ico" 这里写的是相对路径，改成 href="/images/favicon.ico"

（5）清空缓存，尤其是IE

（6）某些浏览器会忽略端口号，需要改为<link href="http://xxx.com:80/img/favicon.ico" rel="SHORTCUT ICON"/>

参考博客：

1，html - favicon.ico在IE里无法显示，但是在chrome里显示正常为什么？ - SegmentFault
https://segmentfault.com/q/1010000002391565

posted @ 2019-06-25 18:10 花生喂龙阅读(884) 评论(0) 编辑收藏举报

花生喂龙