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

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

作者: moutory | 来源:发表于2022-05-09 17:20 被阅读0次

前言

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

一、什么是网页的ico图标

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


image.png

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

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

image.png

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

写法一:
<link rel="shortcut icon" href="图标的具体位置" type="image/x-icon">


写法二:
<link rel="icon" href="图标的具体位置" type="image/gif">

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

三、常见问题解答

假如网站换了新的图标,想马上看到效果,可以如何快速清除掉之前的图标缓存呢?
比较通用的方式是Ctrl+F5来进行页面的强制刷新,此时浏览器就会重写去获取一次ico图标。部分浏览器会不支持这种方法刷新缓存,遇到这种情况具体百度就行。

ico图标支持什么文件格式的图片
较早的浏览器是只支持.ion格式的图标,但是现在谷歌/火狐浏览器这些都是支持pngjpg格式的图标了。如果想要将
.jpg.jpeg.gif.png等图像格式转为ico格式,可以去这个网站上面进行操作:https://www.bitbug.net/

注意事项:

  • 网页的ico图标应该尽可能的小一点,防止图标内存过大而用户加载失败,同时小一点的图片加载的速度更快,用户体验度也会更好
  • ico图标不同的浏览器加载的策略可能不同,如果想要ico图标的兼容性更高,建议不要直接使用jpg格式的图片,而是使用.ion格式的图片作为网页图标

相关文章

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

    前言 相信大家在浏览网页时常常能看到大部分网站在浏览器上都会显示一个小图标,作为网站的logo。本篇文章将介绍如何...

  • html 第一天

    网页标题上面的图标 可以下载某一个网站上面的图标域名/favicon.ico 在自己网页上面显示一个图标

  • 禁止 favicon.ico 请求 - H5移动端

    favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果...

  • HTML系列(HTML图像)

    背景图案的设置 将图片插入到网页中去 用图像作为超链接 为网站添加图标 (图标的存储格式为.ico,可以在Phot...

  • 关于.ico图标

    一、说明关于网页在浏览器中显示的图标,強烈推荐使用.ico而不是使用png或者gif 所有的浏览器,包括IE5,都...

  • 浏览器的书签栏的小图标设置

    大家在浏览网页的时候,在浏览器最上面的书签栏中会有一个小图标,今天就来聊聊怎么设置这个小东西。 通过html的一个...

  • wordpress网站怎么设置更换站点favicon ico图标

    站点favicon ico图标就是浏览器标题前面的小图案,一般新站都会有一个默认的图标,例如你是用wordpres...

  • 制作网页ico图标

    任何网站都可以在其网址后加/favicon.ico查看其图标 自己制作图标:在html的 中写入下面代码 ico...

  • Shiro登录后下载favicon.ico问题

    一般打开一个网页的时候,浏览器都会请求favicon.ico这个文件,用来显示在地址栏上表示这个网站的图标。 当配...

  • 2018-02-13

    QT Widget应用程序设置应用程序的图标 【1】下载以获取应用程序的图标ico图片格式(比如App.ico) ...

网友评论

      本文标题:设置网页在浏览器上面的ico图标

      本文链接:https://www.haomeiwen.com/subject/ezbhurtx.html