favicon.ico介绍，网页图标的制作&动态网页图标

最新推荐文章于 2024-05-23 11:10:05 发布

前端开发黑子

最新推荐文章于 2024-05-23 11:10:05 发布

阅读量3.5k

点赞数

分类专栏： HTML 文章标签： favicon 网页图标

本文链接：https://blog.csdn.net/fifteen718/article/details/61623339

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、直接上成功的代码，关键代码：

<!DOCTYPE html>
<html>

<head>
    <title>网页图标</title>
    <link href="favicon.ico" rel="icon" type="image/x-icon"/>
    <link href="animated_favicon.gif" rel="icon" type="image/gif" >
</head>

<body>
Hello Boy!
</body>
</html>

2、文件目录参考：

3、效果如下：

谷歌浏览器：

火狐浏览器：

注：火狐浏览器这个是个gif动图，由于动态图标目前仅火狐可用，所以为了区分两者我这里设置的网页图标分别用了两者不同的图。实际当中要显示一致的话可以直接去掉

这句。谷歌浏览器默认将gif显示为静态图。

4、关于代码：

网上找了一堆关于设置favicon.ico的结果好几个是无效的，参考如下：

最终测试OK的是这三句：

其中关键部分是：

解释一下：

href: 这是你网页图标的位置，建议放在服务器根目录下，图标必须是ico文件，我试过直接修改png格式是无效的，文件转换可以网上搜一下工具（比如我用的是这个：http://www.atool.org/ico.php），gif的话就不必转格式了！

rel: 用于解释 href 链接的对象和该网页有毛线关系用的，毕竟全称就是 relationship ，这个很重要！

剩下的 mce_href 、 type 这些就不解释了，百度去吧。 mce_href 有的说是为了搜索引擎（SEO）用的

前端开发黑子

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录