ICO图标的制作和实际应用场景

简介: 什么是ICO图标favicon,即Favorites Icon的缩写,是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。 以图标的方式区别不同的网站。

什么是ICO图标


favicon,即Favorites Icon的缩写,是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。 以图标的方式区别不同的网站。


ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。


Mac OS中使用的是ICNS格式。


ICO图标格式,即指英语的“icon”,其MIME类型image/x-icon,是一种用于图标显示的图帧式。除了一般图片常见的颜色外,一般还用调色板定义了透明色和反色。


常见尺寸


下面是一些平台favicon最佳尺寸列表:


图标常见尺寸有16×16(小图标)、32×32、48×48,另外24×24、64×64、128×128也比较常见。256×256多见于Windows Vista以上版本的Windows操作系统中。


16X16:显示在地址栏、工具栏及应用左上角


32X32:显示在电脑最下方的任务栏上、微信发送的框里


48X48:桌面快捷图标



image.png


16X16.png


image.png


32X32.png


image.png


48X48.png


256X256:苹果桌面应用


8×8、10×10、20×20多用于工具栏的按钮。


  • 绝大多数桌面浏览器:16×16, 32×32以及尽可能大


  • Android Chrome:192×192


  • Google TV:96×96


较旧的操作系统不支持超过128×128的图标,所以向用于旧的操作系统的图标文件中添加大图标没有意义。


ICO格式的图片和PNG格式图片是不一样的,PNG图片就是一张单独的图片,但是作为Favicon的ICO格式图片应该是一组16×16、32×32和48×48图像集合。所以,一张PNG图标格式转换成ICO格式后尺寸会大很多,是因为这个ICO图标包含了多个尺寸。系统会自动判断调用哪个大小的图标


image.png


常见尺寸


怎么设置favicon.ico


第一种方式:放在根目录


这种方法最简单,在服务器根目录下放一个 favicon.ico 的文件,浏览器发现后就会使用。(把做好的favicon.ico图标文件上传到网站根目录,并命名为xxx.ico就可以了; )


注意:这种方式,ico文件的名称一定要叫:favicon


第二种方法:link标签


在head里面加入代码:

<link rel="shortcut icon" href="ico文件url">
//这是一种过时的用法,可以被淘汰掉用西面这种写法
<link rel="icon" type="image/x-icon" href="/path/to/icons/favicon.ico">
//引用ico格式
<link rel="icon" type="image/svg+xml" href="./assets/images/favicon.svg">
//引用SVG格式
<link rel="icon" type="image/png" href="./assets/images/favicon.png">
//引用png格式
注:这种方式,图标的名称就可任意命名了,只需要路径填上即可,根目录下”./“可以省略。


此外我们也可以用PNG图标


ico支持所有浏览器,对于现代桌面浏览器,推荐使用PNG图标作为favicon。


我们还可以使用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">


在不同浏览器下测试发现Chrome,Firefox,IE edge下小图标均换成了圆角的“图标”。


image.png



然后我们打开控制台看下chrome浏览器下请求的尺寸是32X32的PNG图标


image.png


chrome浏览器请求



再看下Firefox的请求则是16X16和128X128两个尺寸


image.png


image.png


为什么要引用多个尺寸


ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。


我们知道一张小图被放大很多,图片就会变得很模糊;相反,如果很大的图片缩成很小,图片也会看不清,也就是大家说的图片花了。


image.png


image.png



最佳的解决方法就是按对应场景设计不同分辨率图标集成为一个 ico 格式的图标


image.png



ico_test.ico 是由右边7个 png 合成的,每个 png 上的数字对应了自己的分辨率,然后我把ico_test.ico应用到一个测试程序上,得出效果如下:


image.png



favicon的图片在线转换(免费无广告)


https://realfavicongenerator.net/


image.png


image.png


favicon与404


本地网页开发的时候,Chrome浏览器经常可以看到 favicon.ico 404错误,这个可以忽略,只要线上服务器跟地址有favicon.ico就可以了,不要担心上线会出问题,因为网页如果没有指定favicon浏览器会自动从域名的根目录下查找名为favicon.ico的文件,如果找不到就会404。


如果本地这个错误提示让你很烦,则你可以制作一个和线上favicon.ico形状图形一样,但颜色不同的favicon.ico放在本地开发目录的跟地址中。比如:线上favicon用蓝色系的,本地环境的favicon.ico使用红色系;


这样一眼就看清楚到底是线上环境还是本地环境,免得数据测试的时候不小心在线上环境操作。我找了张css-tricks的示意图:


image.png



如何让网站不去请求favicon图标


在做 H5 混合应用的时候,不希望产生 favicon.ico 的请求。可以在页面的 <head> 区域,加上如下代码实现屏蔽:

<link rel="icon" href="data:;base64,=">
或者详细一点
<link rel="icon" href="data:image/ico;base64,aWNv">


favicon与base64



favicon除了使用线上地址,还支持base64格式内联,例如:


<link rel="icon" href="data:image/x-icon;base64,AAABAA...8AAA==" type="image/x-icon" />


file://协议打开的本地HTML静态页面可以使用这种方式让浏览器地址栏的favicon显示。


[参考文章]


[1]https://www.zhangxinxu.com/wordpress/2019/06/html-favicon-size-ico-generator/?shrink=1.


[2]https://www.jianshu.com/p/58007c9a762d.


[3]https://www.cnblogs.com/kunmomo/p/13398818.html


[4]https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16



相关文章
|
NoSQL Linux Shell
Linux下的系统编程——vim/gcc编辑(二)
Linux下的系统编程——vim/gcc编辑(二)
126 0
Linux下的系统编程——vim/gcc编辑(二)
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
692 0
|
存储 Kubernetes 算法
MinIO 分布式集群搭建
MinIO 分布式集群搭建 分布式 Minio 可以让你将多块硬盘(甚至在不同的机器上)组成一个对象存储服务。由于硬盘分布在不同的节点上,分布式 Minio 避免了单点故障。 Minio 分布式模式可以搭建一个高可用的对象存储服务,你可以使用这些存储设备,而不用考虑其真实物理位置。
7255 0
|
OLAP OLTP OceanBase
构建基于 OceanBase 的混合事务与分析处理(HTAP)系统
【8月更文第31天】 随着业务复杂性的增加,企业需要同时处理大量的在线事务处理(OLTP)和在线分析处理(OLAP)。传统的做法是维护两个独立的系统,分别用于事务处理和数据分析。然而,这种分离的方式不仅增加了运维的复杂度,还可能导致数据不一致的问题。为了解决这些问题,混合事务与分析处理(Hybrid Transactional/Analytical Processing, HTAP)的概念应运而生。OceanBase 作为一款支持 HTAP 的分布式数据库系统,能够同时满足事务处理和分析查询的需求。本文将介绍如何利用 OceanBase 构建 HTAP 系统。
330 1
|
7月前
|
UED SEO
如何使用网站模版建设网站?
本文介绍了如何选择网站模板建站的步骤,包括确定网站类型和目标的重要性、选择模板品牌、网站内容修改和部署测试、以及网站上线后的维护。模板建站的优势包括便捷性和低成本、用户体验高、快速建站和节省成本。
215 7
|
机器学习/深度学习 人工智能 自然语言处理
从零开始学习深度学习:入门指南与实践建议
本文将引导读者进入深度学习领域的大门,从基础概念到实际应用,为初学者提供全面的学习指南和实践建议。通过系统化的学习路径规划和案例实践,帮助读者快速掌握深度学习的核心知识和技能,迈出在人工智能领域的第一步。
827 10
带你读《实分析(原书第4版)》之三:Lebesgue测度
本书是一部实分析方面的经典教材,主要分三部分,第壹部分为经典的实变函数论和经典的巴拿赫空间理论;第二部分为抽象空间理论,主要介绍分析中有用的拓扑空间以及近代巴拿赫空间理论;第三部分为一般的测度和积分论,即在第二部分理论基础上将经典的测度、积分论推广到一般情形。
|
Ubuntu 关系型数据库 MySQL
ubuntu使用aliyun源+mysql删除有外键约束的数据+查看特定目录的大小
ubuntu使用aliyun源+mysql删除有外键约束的数据+查看特定目录的大小
167 4
|
机器学习/深度学习 自然语言处理
多语言模型在实际应用中有哪些优势和局限性?
多语言模型在实际应用中有哪些优势和局限性?
|
数据采集 机器学习/深度学习 存储
ETL工程师必知的数据清洗方法【最全】
ETL工程师必知的数据清洗方法【最全】