将图片转换为图标和网站图标
选择一张图片,我们会为其生成一整套图标:一个内含六种尺寸的 favicon.ico,以及浏览器和操作系统所需的各种尺寸的 PNG 图标。
使用方法
- 1
选择一张图片——最好是透明背景的正方形 PNG。
- 2
选择适配模式和所需的尺寸。
- 3
下载前预览每种尺寸的效果。
- 4
单独下载 favicon.ico,或下载包含 PNG 图标和清单文件的完整图标包。
为什么一张图片是不够的
浏览器标签页需要 16 和 32 像素的图标,iOS 主屏幕需要 180 像素,而 Android 的清单文件则需要 192 和 512 像素。如果只提供一张大图,每个设备都要自行缩放,在小尺寸下会显得模糊,因此我们会为每种尺寸单独渲染,并使用高质量的平滑处理。
什么是 ICO 文件
ICO 是一个包含多种不同尺寸图像的单一文件,系统会根据需要自动选用合适的尺寸。我们会在其中放入 16、32、48、64、128 和 256 像素——这几种尺寸涵盖了浏览器和 Windows 系统所需要的全部范围。
完整显示还是填充并裁剪?
图标是正方形的,而您的图片通常不是。「完整显示」会保留图片全部内容,并添加透明留白,适合徽标一类的图片。「填充并裁剪」会填满整个正方形并裁掉多余边缘,适合照片类图片。
常见问题
- favicon.ico 和 PNG 图标有什么区别?
- ICO 文件将多种尺寸打包在一起,所有浏览器(包括较旧的浏览器)都能识别。而 iOS、Android 和网页清单文件则需要独立的 PNG 图标。完整图标包同时提供这两种格式。
- 生成的文件应该放在哪里?
- 放在您网站的根目录下,然后将工具下方显示的链接标签添加到页面的 head 部分中。
- 什么样的原始图片效果最好?
- 透明背景的正方形图片,尺寸 512 像素或以上。简洁的徽标在 16 像素下的辨识度要远好于细节复杂的图案。
- 会保留透明度吗?
- 会。无论在 ICO 内部还是外部,每种尺寸都以 PNG 格式生成,而 PNG 完全支持透明度。
- 支持 SVG 吗?
- 支持,而且它是最理想的原始素材——系统会按每个图标的精确尺寸进行绘制,因此效果始终清晰锐利。
- iOS 图标的尺寸是多少?
- 180 像素,用于 apple-touch-icon 标签,在尺寸列表中默认已被选中。
- 我的图片会被上传到服务器吗?
- 不会。生成过程完全在您的浏览器内完成,ICO 文件本身也是在页面上逐字节组装而成的。
- 什么是 site.webmanifest?
- 这是一个文件,用于告知 Android 系统在有人将您的网站添加到主屏幕时应使用哪些图标。我们会在图标包中生成好这个文件,开箱即用。