Favicon建议最多的是从2014年编写的生成器中复制出来的十几个PNG大小的列表,这些大小大多已经不做了什么,一个站点今天需要的就是短:一个 favicon.ico zhi在寻找的浏览器和工具,现代一切都有一个可扩展或高分辨率的图标,phone一个触摸图标,把人绊倒的部分是。ico本身,因为它不是一个带有奇数扩展的图像,它是一个装有若干图像的小容器。
ICO文件是如何构建的,哪些大小属于favicon。ico内部以及为什么,站点需要哪些其他图标文件旁边,以及使图标在浏览器选项卡中看起来很软或无法读取的错误,它位于下面 图像工具中心toolz转换器引用的每一个大小都来自其源代码。
TL;博士: ICO文件是一个容器:一个短目录后面跟着几个方形图像,每个大小一个,浏览器或操作系统从中选择最接近的匹配。对于favicon。ico,包括16,32和48 px,如果相同的文件加倍为Windows图标,则添加256 px。每个条目最多可以容纳256 x 256像素。在其旁边,声明一个SVG或大型PNG图标和一个180 x 180
apple-touch-icon. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 PNG 到 ICO 转换器 将 16、32、48 和 256 px 条目写为 PNG,透明、客户端、上传任何内容、免费、无注册。
什么是 ICO 文件?
ICO文件是Windows图标格式:一个头,一个目录列出了里面的每个图像,以及每个条目的图像数据,微软在其文件中记录了布局 图标技术文章式(windows),而它自Windows第一版以来一直是Windows程序、快捷方式和文件夹图标的格式,浏览器在90年代末期将其用于favicons,这也是为什么大多数网站上的文件仍然被调用的原因 favicon.ico。
PNG或JPG不同之处,目录就是它与之不同的原因,需要16个像素的图标的软件会读取目录,找到最接近16的条目,并绘制那个选项卡,书签列表,任务栏按钮和桌面快捷方式,每个都可以从同一个文件中获取不同的图像,这使得设计师可以为微小的尺寸提供一个简化的标记,为大的尺寸提供一个详细的标记,而不是让单个图像随处缩放。
格式有两种媒体类型。 IANA 列表 image/vnd.microsoft.icon的,而大多数服务器和浏览器都使用较旧的 image/x-icon。两者都适用于一个网站图标。
ICO文件是如何构造的?
ICO文件以6字节的头部开始,后面是每个图像一个16字节的目录条目,后面是图像数据,所有的数字都是小端的。
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
该布局中的两个细节解释了图标的大部分令人困惑的事情。
256像素的天花板来自单个字节。 Width和height都存储在一个字节中,可以容纳0到255,格式重用0表示256,没有办法表达任何更大的东西,一个512 x 512条目不能存在于有效的ICO中,无论生成器声称什么。
条目可以是 PNG。 早期的图标将每个图像存储为带有单独 1 位透明掩码的未压缩位图。由于 Windows Vista,条目可以容纳完整的 PNG 文件,该文件在大尺寸下要小得多,并且携带适当的 alpha 通道。存储为未压缩 32 位位图的 256 x 256 图标大约为 256 KB;与 PNG 相同的图像通常是其中的一个小部分。
Toolz转换器编写现代变体,其ICO构建器将类型1,每个大小一个目录条目,平面1和每个像素32位,将256写为0,并将每个条目存储为PNG,其alpha通道在写入任何内容之前拒绝向其询问1到256之外的大小,因为目录没有办法记录它。
优惠图标应该有多大?
Favicon。ico应该包含16 x 16,32 x 32和48 x 48图像,以及256 x 256图像,如果你也希望该文件作为Windows图标工作。在。ico之外,现代浏览器更喜欢用链接标签声明的SVG或大型PNG,手机使用单独的触摸图标。
此表将每个大小映射到使用位置, 确切的行为随浏览器、操作系统和显示器缩放而变化, 因此将其视为常见情况:
| 尺寸 | 它显示的地方 | 需要favicon。ico吗? |
|---|---|---|
| 16×16×快播电影网站大全, 苍井空电影网16mm5、 有效工作空间:268×158×150mm6、 可装试样数量:> | 标准显示屏上的浏览器选项卡、地址栏、书签 | 是的 |
| 32×32×快播电影大全, 苍井空电影32mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200(冲击试样尺寸:10×10×55mm) | 高密度显示器、Windows 任务栏和快捷方式上的选项卡 | 是的 |
| 48×48×快播电影大全, 苍井空电影48×48×150mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | Windows桌面快捷方式,中等图标视图;谷歌搜索建议比这更大 | 是的 |
| 256×256×成人电影网, 苍井空电影网256mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>256×150mm6、 可装试样数量:>256×150mm6、 可装试样数量:>256×150mm6、 可装试样数量:>256×256× | Windows 大型和超大图标视图 | 仅当用作 Windows 图标时 |
| 180×180×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | IPhone 和 iPad 主屏幕 (apple-touch-icon) |
不,分开巴布亚新几内亚 |
| 192×192×成人电影网站, 苍井空电影下载192mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | Android 主屏幕、网络应用程序清单 | 不,分开巴布亚新几内亚 |
| 512×512×成人电影网站, 苍井空电影512mm5、 有效工作空间:268×158×150mm6、 可装试样数量:>200冲击试样尺寸 | Web应用程序清单,安装和溅射屏幕 | 不,不适合 ICO |
| 任何(svg) | 支持 SVG 图标的现代浏览器,包括深色模式变体 | 不,单独的 SVG |
在搜索结果上, Google's 最爱图标指南 ask for a square icon,并推荐一个大于48 x 48像素的图标,谷歌从你主页上声明的图标中获取一个在16像素处顶部的。ico是一个站点's图标在其搜索结果旁边看起来模糊的常见原因。
网站需要哪些 favicon 文件?
A站点需要三个图标文件和一个清单条目来覆盖每一个主流浏览器和设备,不止这些几乎都是剩菜。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
每条线路都有工作:
favicon.ico是后备。的 WHATWG HTML 标准 让浏览器请求/favicon.icofrom 站点 root 当页面完全没有声明图标, RSS 阅读器、爬虫和旧工具仍然可以。即使您声明其他图标, 也要将文件保留在 root。icon.svg是支持SVG青睐图标的浏览器的锐利图标,它扩展到任何密度,可以包括一个prefers-color-schememedia查询,所以图标适应暗选项卡,并不是每个浏览器都尊重它,这就是。ico留下的原因。apple-touch-icon.pngat 180 x 180是iOS在有人将你的网站添加到主屏幕时使用的。给它一个不透明的背景,因为iOS不会保持主屏幕图标的透明度。- 192 和 512 处的清单图标是 Android 和基于 Chromium 的浏览器在将站点安装为应用程序时使用的图标,如 中所述 W3C Web 应用程序宣言。
的 sizes 。ico链接上的属性以一种方式很重要,当浏览器看到一个svg和一个大小的。ico时,它可以告诉svg是可扩展的选择。有些设置使用 sizes="any" 相反,在。ico 上,一些 Chrome 版本的响应是选择。ico 而不是 SVG。特定尺寸可以避免这种情况。
为什么我的 favicon 看起来很模糊或错误?
Favicon问题大多来自源镜像,而不是格式,ICO存储在每个大小下给出的任何东西,缩放只能在一个方向上顺利进行。
| 症状 | 原因 | 修复 |
|---|---|---|
| 柔软、斑点 256 px 条目 | 源小于256 px,因此被拉伸 | 512 x 512或更大的出口开始 |
| 标志被压扁或拉伸 | 非正方形源延伸至正方形 | 转换前将裁剪或垫成方形 |
| 选项卡中的字标不可读 | 16 px处绘制的文本高两个像素 | 16和32 px单独使用符号 |
| 薄轮廓消失了 | 小尺寸时行程低于 1 px | 小尺寸变体的粗笔画 |
| 图标周围有白框 | JPG源没有透明度 | 使用带有 alpha 通道的 PNG |
| 旧图标不断显示 | 浏览器积极缓存青睐的图标 | 重命名文件或添加查询字符串,然后硬刷新 |
| Google 结果中没有图标 | 48 px下的图标,被机器人。txt屏蔽,或者不在主页上 | 从主页上提供更大的图标并允许抓取 |
1行值得拼出来,因为它也抓住了经验丰富的设计师,用256勾选转换的64 px源产生256 px条目,也就是64 px图像放大四倍,正是条目高密度Windows视图和大快捷方式显示的大源下缩放,才是看起来不错的方向。
第三行是算术问题,一个 16 x 16 的图标总共有 256 个像素,挤入该宽度的五个字母的字标每个字母大约有三个像素,抗锯齿将它们变成灰色污迹。几乎每个知名网站都因此使用单个字母或符号来表示其青睐图标。
如何从巴布亚新几内亚制作 favicon。ico?
导出至少 512 x 512 像素的方形 PNG,背景为透明,将其转换为具有所需大小的 ICO,并在发布前检查真实大小的 16 px 条目。
使用 PNG 到 ICO 转换器 在工具上:
- 放下 PNG。几个可以同时进去;每个都成为自己的。ico。
- 选择图标大小。所有四个框(16、32、48 和 256 px)都勾选以开始。对于纯 favicon,取消勾选 256 可以使文件更轻,因为 256 条目是其重量的大部分。如果全部取消勾选四个,转换器将回落为写入所有四个而不是生成空图标。
- 按 转换为 ICO。方形 512 x 512
logo.png回来作为logo.ico附注"包含16、32、48、256 px图标。" - 下载文件,或将批量作为
converted-ico.zip。
转换器将您的图像绘制到每个尺寸的画布上,将每个正方形编码为 PNG,并将它们首先最小地打包成一个。ico,所有客户端,因此艺术品永远不会离开设备。在每个尺寸上都保持透明度。将非正方形源拉伸以填充每个正方形而不是裁剪,并且注释如此说明:删除 1024 x 256 字标,它会报告图像是 1024x256 并拉伸到您选择的尺寸的正方形。该注释是您首先裁剪或填充的提示。
为了获得小尺寸的最佳结果,请制作两个 PNG:一个用于 48 和 256 px 的详细符号,一个用于 16 和 32 px 的简化符号。每个转换器仅勾选其大小。转换器每个文件写入一个源,因此双图像方法为您提供两个。ico 文件;使用简化后的 favicon.ico者(如:windows)应用程序或快捷方式图标,因为浏览器大多选择小条目,以及详细的条目。
我可以从 JPG 或 SVG 制作 ICO 吗?
对两者都是的,并且对每一个都有一个警告。
JPG工作,但每个图标条目都以填充方块的形式出现,没有透明度,因为JPEG没有alpha通道,也没有转换器可以恢复一个。的 JPG 到 ICO 转换器 16、32、48和256 px的方块中重新采样照片,照片在16 px时也几乎失去了所有细节,因此在单个高对比度对象周围紧紧地裁剪,并在转换之前将裁剪方块水平挤压一张4032 x 3024手机照片按原样转换,注释告诉您。
SVG 是最好的来源,因为它没有固定的分辨率,并且在每个入口尺寸下都会呈现清晰的效果。路线取决于您想要的控制力。 SVG 到 PNG 转换器 SVG渲染到PNG,您可以先检查和编辑;任何最长的边低于512 px的SVG在512处绘制,因此24 x 24图标SVG仍然给出256条目的干净源或将SVG直接放入一般 图像转换器的,它接受SVG、PNG、JPG等十几种格式,选择ICO作为目标,一步渲染打包。
| 来源 | ICO 的透明度 | 256 px 时的锐度 | 最好使用 |
|---|---|---|---|
| SVG | 保留 | 锐利,从向量渲染 | 您拥有的矢量形式的徽标 |
| PNG 512 px 或更大 | 保留 | 锋利 | 最喜欢的 |
| 巴布亚新几内亚 256 比索以下 | 保留 | 256处柔软 | 取消勾选 256,或重新导出更大的 |
| JPG | 没有,充满方形 | 取决于源大小 | 仅基于照片的图标 |
| 现有ICO | 保留 | 从条目重建浏览器解码 | 更改文件携带的大小 |
现有的。ico 也可以反馈。转换器从不将 ICO 视为重命名;它总是按照您勾选的大小重建文件。这是一种将臃肿的 favicon 剥离到 16、32 和 48 的快速方法,尽管它从浏览器解码的一个条目重建,因此如果您有它,请从原始艺术品开始。 SVG 与 PNG 涵盖了为什么矢量主机值得保留以进行此类再导出。
2026年,favicon。ico还重要吗?
是的,作为后备。当前浏览器使用您声明的 SVG 或 PNG 图标,但使用根 /favicon.ico is still what some browser, feed readers, bookmark tools and crawlers fetch when they find no declaration or does not support the declared type。a missing one also fill server logs with 404s, since those requests arried whether the file existence or not。
不再重要的是旧版尺寸的长尾。单独的 57、60、72、76、114、120、144 和 152 像素触摸图标可以追溯到较旧的 iOS 版本,并且由单个 180 px 文件覆盖。通过声明的 Windows 磁贴图像 browserconfig.xml windows 8和10开始屏幕磁砖所属,新站点也不需要。
以下是实际的最小设置,其中包含预期的文件大小:
| 文件 | 像素大小 | 典型重量 | 需要? |
|---|---|---|---|
favicon.ico 有16、32、48 |
16、32、48 | 几KB | 是的,作为后备 |
icon.svg |
可扩展 | 2 KB以下,为一个简单的标记 | 推荐 |
apple-touch-icon.png |
180×180×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 5至20千克 | 是的,对于 iOS |
icon-192.png、 icon-512.png |
192、512 | 10至60千克 | 如果该网站有清单 |
浏览器中转换图标是私有的吗?
是的。在 Toolz 上,解码、调整大小、PNG 编码和打包。ico 都会发生在客户端、浏览器选项卡内,因此不会上传任何图像,并且页面一旦加载就保持离线工作。源上附加的元数据和颜色配置文件会通过画布步骤丢弃,这对于图标来说是无害的。
100 兆像素以上的图片和空文件,拒绝留言,超过 50 MB 的 SVG 源,工具免费,不注册,每天限制转换。
