Fe-interview: [html] 第73天 favicon.ico有什么作用?怎么在页面中引用?常用尺寸有哪些?可以修改后缀名吗?

Created on 27 Jun 2019  ·  5Comments  ·  Source: haizlin/fe-interview

第73天 favicon.ico有什么作用?怎么在页面中引用?常用尺寸有哪些?可以修改后缀名吗?

html

Most helpful comment

作用:favicon 也叫收藏夹图标,我们经常从网页标签中看到这个图标,但它的作用往往不仅如此,favicon的存在能够让我们更加容易区分浏览器收藏夹中的内容。并且favicon 在一定程度上减轻服务器的流量带宽占用,一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。

引用方式:

尺寸:1616 3232

[引用]:https://segmentfault.com/a/1190000007764284

All 5 comments

作用:标签页左上角图标
引用:


尺寸: 16x16 32x32

作用:favicon 也叫收藏夹图标,我们经常从网页标签中看到这个图标,但它的作用往往不仅如此,favicon的存在能够让我们更加容易区分浏览器收藏夹中的内容。并且favicon 在一定程度上减轻服务器的流量带宽占用,一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。

引用方式:

尺寸:1616 3232

[引用]:https://segmentfault.com/a/1190000007764284

  • Favorites Icon,让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。
  • 强烈推荐使用后缀名.ico,对浏览器的支持范围广,一个.ico文件可以同时满足多个尺寸的需求。
  • 常用尺寸:1616 3232 48*48。
  • 引用方法:

    • 将图片 favicon.ico 放到 static 文件夹下 (用 vue-cli 搭建的Vue项目)

    • 然后在 index.html 中添加:

      <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

https://blog.csdn.net/Bule_daze/article/details/102718508

网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

1、制作favicon图标

  • 把图标切成 png 图片
  • png 图片转换为 ico 图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/

2、使用favicon图标

  • favicon图标放到网站根目录下
  • HTML页面引入favicon图标

在html 页面里面的 元素之间引入代码

 <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/> 

常用尺寸:16*16 32*32 48*48

作者:Jane_xxxxxy链接:https://juejin.cn/post/6855610710932586510

Was this page helpful?
0 / 5 - 0 ratings