[html] 第73天 favicon.ico有什么作用?怎么在页面中引用?常用尺寸有哪些?可以修改后缀名吗?
haizhilin2013 opened this issue · comments
第73天 favicon.ico有什么作用?怎么在页面中引用?常用尺寸有哪些?可以修改后缀名吗?
作用:标签页左上角图标
引用:
作用:favicon 也叫收藏夹图标,我们经常从网页标签中看到这个图标,但它的作用往往不仅如此,favicon的存在能够让我们更加容易区分浏览器收藏夹中的内容。并且favicon 在一定程度上减轻服务器的流量带宽占用,一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。
引用方式:
尺寸:1616 3232
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">
- 将图片 favicon.ico 放到
网站 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
作用:favicon 也叫收藏夹图标,我们经常从网页标签中看到这个图标,但它的作用往往不仅如此,favicon的存在能够让我们更加容易区分浏览器收藏夹中的内容。并且favicon 在一定程度上减轻服务器的流量带宽占用,一般为了提高网站的可用性,我们都会为自己的网站创建一个自定义的404错误文件,在这种情况下,如果网站没有相应的favicon.ico文件,每当有用户收藏网站/网页时, Web服务器都会调用这个自定义的404文件,并在网站的错误日志中记录。这显然是应该予以避免的。
引用方式:
尺寸:16_16 32_32