这篇文章发布于 2019年06月15日,星期六,21:49,归类于 HTML相关。 阅读 45985 次, 今日 17 次 10 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8747
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
本文大部分内容源自这个stackoverflow问题的最高赞回答,然后结合其他一些我知道的favicon知识整理而成。
一、favicon的格式
favicon通常使用下面这几种文件格式:
favicon.ico
图标- PNG格式图标
favicon.ico
类型的图标所有桌面浏览器都支持,包括旧版本的IE浏览器。
PNG格式的图标现代桌面浏览器(如IE11,Chrome,Firefox)都支持。
为了在跨桌面浏览器(Windows/IE, MacOS/Safari等)的时候有最好的效果,建议结合这两种类型的图标。
二、favicon的尺寸
favicon必须是正方形,桌面浏览器以及苹果iOS是不支持非正方形的图标的。
favicon.ico
ICO格式的图片和PNG格式图片是不一样的,PNG图片就是一张单独的图片,但是作为Favicon的ICO格式图片应该是一组16×16、32×32和48×48图像集合。所以,一张PNG图标格式转换成ICO格式后尺寸会大很多,是因为这个ICO图标包含了多个尺寸。
有些人会直接把.png
图标改后缀为.ico
来使用,这种用法是错误的,两种类型的图标是不一样的,但是很诡异的是,有些浏览器足够的智能,虽然你的后缀是.ico
,其也能正确解析为PNG格式。
微软官方是推荐把16×16, 32×32 以及 48×48这几个尺寸的图标整合在favicon.ico
中的。例如,IE会把16×16版本的用在浏览器的地址栏上,而32×32这个尺寸用在快捷任务栏上。
使用示意如下:
<link rel="icon" href="/path/to/icons/favicon.ico" type="image/x-icon">
注意,我们直接使用rel="icon"
就可以了,现在很多网站依然使用rel="shortcut icon"
,这是一种过时的用法,可以被淘汰掉了。
当然,对于favicon.ico
的使用,最推荐的做法是放在网站的根目录下,不需要有任何额外的声明。同时在页面头部声明PNG格式的favicon,给现代浏览器使用,因为体积更小,使用也更灵活。
PNG icons
对于现代桌面浏览器,推荐使用PNG图标作为favicon。
通常期望的尺寸是 16×16, 32×32以及越大越好。例如,MacOS/Safari使用196×196尺寸图标,如果这是这些浏览器能够找到的最大的图片。
那应该推荐什么尺寸是什么呢?下面是一些平台favicon最佳尺寸列表:
- 绝大多数桌面浏览器:16×16, 32×32以及尽可能大
- Android Chrome:192×192
- Google TV:96×96
- 其他平台自己可以找找文档,查查资料。
我们还可以使用sizes
属性指定PNG图标的尺寸,这样浏览器自己可以选择合适尺寸的小图标。
例如:
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32"> ...
我们可以实际测试下这种sizes
尺寸设定在常见桌面浏览器下的效果:
您可以狠狠地点击这里:PNG格式favicon多个尺寸设置测试demo
测试HTML如下:
<link rel="icon" type="image/png" href="./xin-16.png" sizes="16x16"> <link rel="icon" type="image/png" href="./xin-32.png" sizes="32x32"> <link rel="icon" type="image/png" href="./xin-64.png" sizes="64x64"> <link rel="icon" type="image/png" href="./xin-128.png" sizes="128x128">
结果,Chrome,Firefox,IE edge下小图标均换成了圆角的“鑫”:
然后我们来看下请求:
Chrome浏览器下请求的是32×32的尺寸PNG图标:
Firefox则是请求16×16以及128×128这两个尺寸:
16×16应该用来显示在地址栏上,128×128这个尺寸不知道干什么用的,需要专业人士告知了。,
三、favicon的生成
favicon.ico
类型的文件生成需要专门的工具,不像PNG这么方便。
之前我都是下载个工具制作,不过这样做成本有点高,其实有很多在线的favicon生成工具做的很不错的。
推荐这个:https://realfavicongenerator.net/
无广无告,作者对favicon研究很深入,适合于多种平台,还支持favicon压缩。
例如,选一张“鑫”图片:
其可以生成在各个平台下favicon,以及预览效果:
其他备选在线页面(有广有告):
四、favicon与404
本地网页开发的时候,Chrome浏览器经常可以看到 favicon.ico 404错误,这个可以忽略,只要线上服务器跟地址有favicon.ico
就可以了,不要担心上线会出问题,因为网页如果没有指定favicon浏览器会自动从域名的根目录下查找名为favicon.ico
的文件,如果找不到就会404。
如果本地这个错误提示让你很烦,则你可以制作一个和线上favicon.ico形状图形一样,但颜色不同的favicon.ico放在本地开发目录的跟地址中。颜色不同的建议是:线上favicon蓝色系的,则本地环境的favicon.ico使用橙色或者红色;线上favicon橙色系的,本地使用蓝色系。
这样一眼就看清楚到底是线上环境还是本地环境,免得数据测试的时候不小心在线上环境操作。我找了张css-tricks的示意图:
五、favicon与base64
favicon除了使用线上地址,还支持base64格式内联,例如:
<link rel="icon" href="data:image/x-icon;base64,AAABAA...8AAA==" type="image/x-icon" />
file://
协议打开的本地HTML静态页面可以使用这种方式让浏览器地址栏的favicon显示。
六、结语
下面这段是供大家参考的favicon现代用法,跨PC和移动端的项目可以参考参考:
<!-- place this in your <head></head> --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png"> <link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png"> <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" href="/favicon-57.png"> <link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png"> <link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png"> <link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png"> <link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png"> <link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png"> <link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png"> <link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
另外,windows 8+系统还有browserconfig.xml的概念,可以用来创建贴片图标,类似下图这样:
使用示意:
<!-- place this in your <head></head> --> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileImage" content="/favicon-144.png"> <meta name="msapplication-config" content="/browserconfig.xml">
browserconfig.xml内容示意:
<browserconfig> <msapplication> <tile> <square70x70logo src="/favicon-70.png"/> <square150x150logo src="/favicon-150.png"/> <square310x310logo src="/favicon-310.png"/> <TileColor>#FFFFFF</TileColor> </tile> </msapplication> </browserconfig>
总之,favicon的水还是很深了,因为不同平台下的尺寸啊,使用方式啊都有所不同,本文的内容也只能尽量涉及。
如果以后出现新的平台,例如鸿蒙操作系统,说不定又是另外的favicon尺寸规则。
技术就是这样,有时候看上去好像挺了解的东西一旦深入,发现原来自己懂的只是皮毛。
要时刻保持谦逊才是!
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,永不过期,而且还会及时更新知识点以及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8747
(本篇完)
- 本地开发设置个区分明显的favicon吧~ (0.650)
- 响应式图片srcset全新释义sizes属性w描述符 (0.200)
- HTML5响应式图片技术中文图解 (0.200)
- HTML rel属性值释义大全 (0.200)
- link rel=alternate网站换肤功能最佳实现 (0.200)
- 如何使用JS把相对地址变成绝对地址? (0.200)
- 利用废弃的html rel import实现页面include功能 (0.200)
- 为什么HTML <picture>元素很少见人使用? (0.200)
- Web referrer策略详解与防盗链图片的显示 (0.200)
- 聊聊Web网页中资源加载的优先级 (0.200)
- 纯CSS实现任意格式图标变色的研究 (RANDOM - 0.050)
赞!
大神讲的透彻
我一直在用favicon.ico,用软件可以把16 32 64 128 等的尺寸合并到一个ico上
求助博主,ico在html中为什么显示不正常,也设置了16px,链接如下
https: //ooiii.com/about/
同求……我的放网上正常,下载下来就退化到16*16*4bit了 /大哭。
鸿蒙操作系统,23333
总结一下
favicon.ico类型的图标所有桌面浏览器都支持,包括旧版本的IE浏览器。
作为Favicon的ICO格式图片应该是一组16×16、32×32和48×48图像集合
微软官方是推荐把16×16, 32×32 以及 48×48这几个尺寸的图标整合在favicon.ico中的
对于现代桌面浏览器,推荐使用PNG图标作为favicon。
今天有需要就搜到您文章了,非常棒
真正的大师永远怀着一颗学徒的心!
借鉴一下,感谢大神!
128的应该是放桌面的时候用吧?