竞技学院

设置网页在浏览器上面的ico图标

前言

相信大家在浏览网页时常常能看到大部分网站在浏览器上都会显示一个小图标，作为网站的logo。本篇文章将介绍如何给网页设置这个logo图标，希望对各位读者有所帮助。

一、什么是网页的ico图标

我们不妨打开简书的首页，大家可以发现在网页标题的左侧会有一个小logo图标，很多公司会习惯于将公司（或者产品）的logo放在网页上，从而加深用户的印象。

二、设置ico图标的请求路径

浏览器会在首次访问网站的时候对ico图标进行请求，当没有明确指定ico图标的位置时，浏览器默认会从网站的根路径去请求ico图标。无论请求结果如何，后面就都不会再主动去获取了。即使第一次加载的时候没有加载成功

我们当然也可以手动指定ico图标的位置，方法也很简单，在html页面的head头部加入如下代码（两种写法，任选其一）即可：

写法一：

写法二：

本人试了第一种写法，确实是可以生效的。

三、常见问题解答

假如网站换了新的图标，想马上看到效果，可以如何快速清除掉之前的图标缓存呢？

比较通用的方式是Ctrl+F5来进行页面的强制刷新，此时浏览器就会重写去获取一次ico图标。部分浏览器会不支持这种方法刷新缓存，遇到这种情况具体百度就行。

ico图标支持什么文件格式的图片

较早的浏览器是只支持.ion格式的图标，但是现在谷歌/火狐浏览器这些都是支持png、jpg格式的图标了。如果想要将

.jpg、.jpeg、.gif、.png等图像格式转为ico格式，可以去这个网站上面进行操作：https://www.bitbug.net/

注意事项：

网页的ico图标应该尽可能的小一点，防止图标内存过大而用户加载失败，同时小一点的图片加载的速度更快，用户体验度也会更好

ico图标不同的浏览器加载的策略可能不同，如果想要ico图标的兼容性更高，建议不要直接使用jpg格式的图片，而是使用.ion格式的图片作为网页图标