WebP转ICO转换器
你的标志只有从自己网站保存下来或设计软件导出的WebP文件?把它转换成favicon.ico,浏览器、书签和Windows快捷方式都能直接识别,无需额外添加代码。
图片格式转换
或将JPG, JPEG, JPE … 文件拖放到此处 ·
单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除
文件在我们的服务器上处理,并在 30 分钟后删除。
85 可使照片在视觉上与原图无差别。只有在需要更小的文件时才调低。
JPG、BMP 和 EPS 不支持透明。透明像素会用此颜色填充。
用于透明像素底色的十六进制颜色,例如 #FFFFFF。
此格式只能保存单张图像。如需保留动画,请选择输出 GIF 或 WebP。
多尺寸图标在一个文件中包含多种分辨率,浏览器和操作系统会选用所需的尺寸。
保持原始尺寸,或输入一边的数值,自动保持宽高比。
上面所选边的像素值。
相对于原始尺寸的百分比。
屏幕和网页使用 sRGB 即可。印刷流程请保持原样;灰度会丢弃颜色。
仅写入元数据,0 表示保留原值。打印机和部分网站会读取此数值,它不会改变像素尺寸。
使用方法
- 1
上传WebP标志
拖入 .webp 文件,一次最多 20 个,每个不超过 95 MB。建议使用至少 256 × 256 px 的方形 Logo,效果最好。
- 2
保留全部图标尺寸
在高级设置中,图标尺寸默认为所有尺寸(16–256)。动态 WebP 只使用第一帧。
- 3
转换后上传到你的网站
点击转换为 ICO,如有需要将文件重命名为 favicon.ico,并放到网站根目录。
现在从网站上保存的 Logo 多半是 WebP。一次转换,就能把它变成保留透明背景的多尺寸 favicon.ico。
用WebP标志制作favicon.ico
自 Google 在 2010 年推出以来,WebP 已成为大部分网站的默认图片格式;WordPress 自 2021 年的 5.8 版起支持上传 WebP,许多图片 CDN 也会转换它提供的每张 PNG。所以当你去找自己的 Logo 时,能找到的往往是 .webp 文件,而网站图标生成器、Windows 和一些主机面板都不接受它。
ICO 格式解决的问题与 WebP 不同。它不是一张压缩图片,而是打包了多个方形位图,由浏览器或操作系统挑选所需尺寸:标签页用 16 px,任务栏或书签栏用 32 px,桌面快捷方式和高密度屏幕用更大的尺寸。转换时会一次性从你的 WebP 生成这些尺寸。
页面顶部的 Logo 仍然使用 WebP 本身。两种文件用在不同位置,转换不会改动原文件。
转换器会在ICO中放入什么
- 五种尺寸打包进一个 .ico
- 16–256 px
- 每批 WebP 文件数
- 20
- 单个文件上限
- 95 MB
- 之后从服务器删除
- 30 分钟
WEBP
WebP 图片
WebP 是 Google 于 2010 年发布的图片格式,目的是让网页加载更快。它在同一种格式中同时支持有损和无损压缩、Alpha 透明和动画。在视觉质量相近的情况下,有损 WebP 文件通常比 JPEG 小 25–35%,无损 WebP 通常比 PNG 更小。目前所有主流浏览器都支持它,但一些较旧的桌面软件、打印服务和上传表单仍然不接受。Windows、macOS 和大多数现代图片编辑器都可以打开 WebP 文件。
- 压缩方式
- 有损或无损
- 透明度
- 支持
- 动画
- 支持
- 发布年份
- 2010 · Google
ICO
Windows 图标
ICO 是微软的图标格式,用于 Windows 程序图标和网站 favicon。一个 .ico 文件可包含多种尺寸的图像,例如 16×16、32×32、48×48 和 256×256 像素,系统可选择最合适的一个。每个图像可存为位图或 PNG 数据,并支持完整的 Alpha 透明度。ICO 不适合照片或大幅图稿。浏览器、Windows 和大多数图标编辑器都能读取。
- 压缩方式
- 无损
- 透明度
- 支持
- 动画
- 不支持
- 发布年份
- Microsoft
当品牌标志只剩网站或 CMS 提供的压缩文件,而网站根目录又需要 favicon.ico 时,就需要把 WebP Logo 转成 ICO。
让WebP标志适配16 px的浏览器标签页
裁剪到标志本身
大多数 Logo 是横向的。只保留图形符号或首字母,并裁剪成留有少量边距的正方形。
去掉小字
标语和文字标识在 16 px 下会变成灰色噪点。单个粗壮的图形可以保留,细线条则不行。
检查两种标签页颜色
分别在浅色和深色浏览器主题下查看效果。透明背景上的深色 Logo 在深色标签页上可能看不见。
将新的favicon添加到你的网站
把 favicon.ico 放在根目录,使 yoursite.com/favicon.ico 可以访问。在页面 head 中用 <link rel="icon" href="/favicon.ico" sizes="any"> 声明,可以明确指定;WordPress 等 CMS 有自己的“站点图标”字段,会替你写入这些标签。
还有两个图标可以补全。用户把你的网站添加到主屏幕时,iPhone 和 iPad 会使用 apple-touch-icon,即 180 × 180 px 的 PNG;可以用 WebP转PNG 和我们的裁剪指南制作。Google 搜索要求使用边长为 48 px 整数倍的方形网站图标,因此在首页链接一个 96 或 144 px 的 PNG,搜索结果也能覆盖。浏览器会长时间缓存网站图标;在无痕窗口中打开页面即可立刻看到新图标。
WebP转ICO常见问题
标志已经是WebP了,为什么还需要.ico文件?
当页面没有声明图标时,浏览器会自动向网站根目录请求 /favicon.ico;Windows 快捷方式、旧版浏览器和许多 CMS 的网站图标字段也要求使用 ICO 或 PNG。根目录放一个 .ico 文件,无需任何标记就能满足这些情况。
WebP标志周围的透明区域会保持透明吗?
可以。WebP 和 ICO 都支持 Alpha 通道,透明背景会原样保留到图标内的每个尺寸中,网站图标在浅色和深色浏览器标签页上都显示干净。
上传动态WebP会怎样?
ICO 只能存放静态图像,因此转换器会使用第一帧(动图输入设为仅第一帧)。如果第一帧是空白或处于过渡中,请换一个源文件。
WebP的有损压缩会影响favicon效果吗?
在 16 到 64 px 下很少出现,因为缩小会把细小的瑕疵平均掉。128 和 256 px 的图层中可能残留淡淡的光晕。如果 Logo 还有矢量版本,用 SVG转ICO 可以得到最干净的边缘。
WebP标志需要多大分辨率,favicon才清晰?
至少 256 × 256 px 且为正方形,这样最大的图层是缩小得来而不是放大。从页面顶部保存的 120 px Logo,在较大尺寸下会显得模糊。