URL输入自动检测图标资源
用户在输入框中输入网站URL后,工具会发起请求获取该网站的HTML文档,然后解析文档中所有与favicon相关的link标签声明。工具会自动识别rel属性中包含icon、shortcut icon、apple-touch-icon等值的link标签,并提取对应的href属性作为图标资源地址。对于同时声明了多种尺寸图标的网站,工具会逐一获取并显示所有检测到的图标。自动检测还支持处理相对路径和绝对路径的图标URL,自动补全缺失的协议前缀和域名信息。检测完成后,工具会在界面中列出所有找到的图标及其对应的尺寸信息。
拖拽与点击上传图标文件
工具支持两种上传方式:点击上传和拖拽上传。点击上传通过文件选择器打开系统的文件浏览对话框,用户可以从中选择一个或多个图标文件进行上传。拖拽上传允许用户直接从文件管理器中将图标文件拖拽到工具的上传区域,松开鼠标后文件即被上传处理。工具支持上传PNG、JPEG、ICO、SVG等多种常见图片格式。上传过程中会显示进度提示,上传完成后图标会立即以各种分辨率进行渲染预览。用户可以同时上传多个不同尺寸的图标文件,工具会对每个文件分别进行多分辨率检查。
18种标准分辨率全面覆盖
工具内置了18种经过精心挑选的常见favicon分辨率,全面覆盖了当前主流设备和浏览器的需求。小尺寸分辨率包括16x16(浏览器标签页图标)、32x32(任务栏快捷方式)、48x48(Windows桌面图标)。中等尺寸包括64x64(高分辨率标签页)、96x96(智能电视)、128x128(Chrome扩展图标)。大尺寸包括144x144(Windows磁贴)、150x150(Windows磁贴)、192x192(Android Chrome图标)。超大尺寸包括256x256(Chrome网上应用店)、384x384(Android Chrome)和512x512(Android启动画面)。每种分辨率都对应特定的设备或使用场景。
四大类尺寸分组显示
18种分辨率被智能分为四大类分组,每个分组对应不同的设备生态系统和使用场景。标准类分组包含桌面浏览器和通用场景使用的尺寸,这些是最基础的favicon尺寸,几乎每个网站都需要支持。Apple类分组包含iOS设备专用的尺寸,对应iPhone和iPad的不同屏幕密度和使用场景。Android-PWA类分组包含Android设备和渐进式Web应用所需的尺寸,是PWA应用图标规范要求的核心尺寸。Microsoft类分组包含Windows磁贴和开始菜单使用的尺寸,适用于Windows平台的应用磁贴展示。每个分组都会标注设备类型和用途说明。
三种背景模式灵活切换
浅色背景模式使用纯白色或浅灰色作为背景色,模拟了标准浏览器标签页和大多数桌面应用界面的显示环境。深色背景模式使用深灰或纯黑作为背景色,模拟了深色模式浏览器和深色桌面壁纸的显示环境。棋盘格背景模式使用灰色和白色交替的方格图案作为背景,类似于图像编辑软件中的透明区域表示方式。这种模式可以清楚地显示图标的透明区域,帮助用户验证图标是否正确使用了Alpha通道。三种模式可以一键切换,方便用户快速对比不同背景下的显示效果。
像素级放大查看功能
工具提供了像素级放大查看功能,允许用户将图标放大到原始尺寸的多倍进行详细检查。通过放大查看,用户可以清楚地看到图标在每个像素级别的渲染效果,包括边缘的抗锯齿处理、颜色的过渡效果、细节元素的清晰度等。这个功能对于检测图标在小尺寸下的可读性特别有用。当图标缩小到16x16或32x32像素时,复杂的图形细节可能会模糊不清,通过像素级放大可以快速发现这些问题。放大查看还支持鼠标悬停查看单个像素的颜色值,帮助设计师精确调整图标的设计细节。
分组信息与设备说明
每个分组不仅显示对应分辨率的图标预览,还提供了详细的设备类型说明和使用场景描述。标准类分组会说明每种尺寸对应的浏览器和操作系统使用场景。Apple类分组会标注每种尺寸对应的具体iOS设备型号和屏幕密度。Android-PWA类分组会说明PWA图标的规范要求和推荐尺寸组合。Microsoft类分组会标注每种尺寸对应的Windows磁贴类型。这些信息帮助开发者理解为什么需要准备多种尺寸的图标。
检测结果汇总与建议
工具会在检查完成后提供完整的检测结果汇总,列出所有已检测的分辨率尺寸及其对应的显示效果评估。对于图标在某些尺寸下可能出现的模糊、变形、细节丢失等问题,工具会给出具体的文字说明和优化建议。检测结果还会显示网站当前已提供的favicon尺寸与推荐尺寸组合之间的差异,帮助开发者了解还需要补充哪些尺寸的图标文件。这些建议基于主流设备和浏览器的实际使用数据,帮助开发者制定合理的图标尺寸策略。
UD5工具箱