!
也想出现在这里? 联系我们
广告位
当前位置:首页>运营>网站运维>favicon.ico——为你的站点添加一个小图标

favicon.ico——为你的站点添加一个小图标

favicon是Favorites Icon的缩写,主要用于显示在浏览器地址栏左侧以提升网站品牌度。对于大多数主流浏览器,favicon不仅在地址栏中显示,还会同时出现在收藏夹中,用户可以通过拖曳favicon到桌面以建立网站的快捷方式。除此之外,标签式浏览器甚至还有不少扩展的功能,如FireFox甚至支持动画格式的favicon。

favicon.ico——为你的站点添加一个小图标

部署 favicon.ico

一般情况下要部署网站的favicon图标,我们只需要在网站的 head 标签中添加如下两句代码引入即可:

代码中图标文件放在了网站的根目录下,当然你也可以将其放在任意一个你可以引用的文件夹下,只需要将代码中 href 的值设置成对应的文件链接即可。我们应该知道,浏览器调用 favicon 的原理是首先在网页所在目录寻找favicon.ico文件,如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的 favicon.ico 上传到网站的根目录下,这样不但不用再添加代码,而且方便其他博客与我们建立友情链接时图标显示的需要;而使用代码的好处就是我们可以方便地自定义不同页面的 ico 图标。另外如果你想要网站支持动态的图标,可以在 head 中添加如下代码:

不过个人并不建议如此,对于目前几乎所有的浏览器而言 ico 格式的图标都有所支持,而对于 gif 、png 之类的图标格式大部分浏览器并不能很好的支持。

使用及显示效果

部署完成后,刷新网页既可以看到 favicon.ico 在网站上的显示效果,对于部分浏览器缓存或者启用了CDN的网站,我们可能需要清除浏览器缓存及CDN缓存内容后才能看到具体效果。

favicon.ico——为你的站点添加一个小图标

如果你想在自己计算机桌面或者任务栏建立自己某一个网站的快捷方式,通过在浏览器任务栏上右键既可以看到一个“创建快捷方式”的选项,点击此选项既可以创建网站的快捷方式(我所使用的浏览器是360浏览器,其他浏览器创建快捷方式的方法可能不一样,但是对于目前的主流浏览器应该都是支持该功能的,具体创建方式搭建可以自行尝试一下)。创建完成后既可以在电脑桌面及任务栏看到显示效果,具体显示效果如下:

favicon.ico——为你的站点添加一个小图标

现在是不是感觉自己网站逼格又提升了几个档次呢?٩(๑❛ᴗ❛๑)۶

给TA打赏
共{{data.count}}人
人已打赏
网站运维

纯代码实现WordPress自动提交404死链(wordpress 404)

2022-9-16 12:32:53

网站运维

WeChat Fans—微信公众号涨粉插件

2022-9-16 12:34:05

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:林沐阳 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索