UD5工具箱
多尺寸Favicon导出器 - 生成全平台图标包
上传一张原图，智能裁剪并输出从16x16到512x512的各尺寸ICO/PNG，适合网页与PWA。
多分辨率 Favicon 检查器
输入网站URL或上传图标，预览在各设备分辨率下的显示效果，确保网站在任何平台都完美呈现
支持输入域名或完整URL，自动解析
或
背景：
加载中...
正在获取图标数据...
🎯
输入域名或上传图标开始检查
支持检测 16×16 至 512×512 共 18 种常见分辨率
无法获取该网站的图标，请尝试上传图片或检查域名是否正确。
浏览器标签页
图标尺寸：16×16 px
桌面快捷方式
图标尺寸：48×48 px
iOS 主屏幕
图标尺寸：180×180 px
标准 Favicon 尺寸
Apple Touch Icon 尺寸
Android / Chrome / PWA 尺寸
Microsoft Tile 尺寸
提示：在线检测使用第三方服务获取图标，可能与实际网站图标存在差异。如需精确检测，建议使用上传功能。点击任意图标可放大查看像素细节。
常见问题
Favicon（Favorite Icon）是网站在浏览器标签页、书签栏、桌面快捷方式等位置显示的小图标。不同平台和设备需要不同尺寸的图标：浏览器标签通常使用 16×16 或 32×32，iOS 主屏幕需要 180×180 的 Apple Touch Icon，Android 和 PWA 应用需要 192×192 或 512×512 的大尺寸图标。提供多尺寸图标能确保在所有场景下都清晰显示。
建议至少准备以下尺寸：16×16（浏览器标签）、32×32（书签）、180×180（Apple Touch Icon）、192×192 和 512×512（PWA/Android）。对于完整的跨平台支持，推荐生成包含 16、32、48、57、60、72、76、96、114、120、144、152、180、192、256、512 的全套图标。可使用在线工具批量生成。
favicon.ico 是传统的 Windows 图标格式，一个文件可包含多个尺寸（如 16×16、32×32、48×48），兼容性最好，几乎所有浏览器都支持。PNG 格式支持透明背景和更丰富的色彩，文件更小，是现代网站的首选。推荐做法：同时提供 favicon.ico（兼容老旧浏览器）和 PNG 多尺寸图标（通过 <link> 标签声明），确保全面覆盖。
Apple Touch Icon 是 iOS 设备将网页添加到主屏幕时显示的图标。设置方法：在 HTML 的 <head> 中添加
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">。iOS 会自动为图标添加圆角效果，因此设计时无需自行添加圆角。推荐尺寸为 180×180 像素，这是 iPhone X 及更新机型使用的高分辨率规格。
常见原因：1) 浏览器缓存——浏览器会积极缓存 favicon，尝试清除缓存或使用无痕模式查看；2) 路径错误——确保图标文件路径正确，建议放在网站根目录；3) HTML 声明缺失——在 <head> 中正确使用 <link rel="icon"> 标签；4) 文件格式问题——确保图标文件未损坏且格式受支持（ICO、PNG、SVG）；5) CDN 或缓存服务——如果使用 CDN，可能需要刷新 CDN 缓存。可以在 URL 后添加版本参数如
?v=2 强制刷新。
是的，现代浏览器（Chrome 80+、Firefox 41+、Edge 80+、Safari 支持度有限）已支持 SVG 格式的 favicon。SVG 图标可无限缩放不失真，文件体积小，且支持暗色模式自适应（通过 CSS media query）。设置方法：
<link rel="icon" type="image/svg+xml" href="/favicon.svg">。建议同时提供 PNG 回退以兼容 Safari 和旧浏览器。
如果图标包含透明区域或颜色较暗，在暗色模式浏览器主题下可能难以辨认。解决方案：1) 使用 SVG favicon 并内嵌 prefers-color-scheme 媒体查询；2) 为图标添加浅色轮廓或阴影，确保在深色背景上有足够对比度；3) 使用不透明的图标设计，避免依赖背景色；4) 在本工具中切换深色/浅色背景，即可预览图标在不同主题下的显示效果。
知识点
📐 设计建议：设计 favicon 时使用简单、高对比度的图形，避免过多细节。最小尺寸（16×16）下复杂图案会模糊不清。
📦 ICO 文件：一个 .ico 文件可包含多个分辨率，使用工具如 ImageMagick 可合并：
convert icon-16.png icon-32.png icon-48.png favicon.ico
🎨 安全区域：Apple Touch Icon 会被 iOS 自动添加圆角（约 22.5% 的圆角半径），设计时需留出安全边距。
🔍 测试工具：除本工具外，还可使用浏览器的开发者工具（Application > Manifest）检查 PWA 图标配置。
全尺寸Favicon生成 - 多平台图标包
上传主图，同时生成32x32、180x180等平台所需的所有favicon尺寸和manifest。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
网站Favicon颜色提取 - 自动获取主色调
输入网址，尝试拉取该站favicon并提取其主要颜色，用于品牌配色参考。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
环境贴图查看器 - 等距柱状投影交互旋转
加载 HDR 或普通全景图，以 3D 天空盒方式旋转查看。
AVIF支持检测 - 新一代图片格式兼容
检测浏览器是否支持显示AVIF图片，为前端图片选型提供依据。
二进制文件十六进制查看器 - 上传文件检查字节
上传任何文件，以十六进制和 ASCII 对照形式显示文件字节内容，适合简单分析文件头。
Canvas 辅助线工具 - 为画布添加标尺和参考线
在 HTML5 Canvas 上叠加可拖拽的辅助线和标尺，帮助精确绘制和布局。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
CSS兼容性速查 - 属性在各浏览器支持图表
搜索CSS属性，显示其在主流浏览器的支持范围和前缀需求，快速避免踩坑。
屏幕标尺量角器 - 叠加元素测量长宽角度
可拖拽的虚拟尺子和量角器叠于当前页面，精确测量像素长度与旋转角度。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
代码审查清单动态生成 - 按语言和项目定制
选择编程语言和关注领域（安全、性能、可读性），生成定制化的代码审查核对表。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式，在文本中用不同颜色高亮整个匹配和每个捕获组。
测试覆盖率可视化器 - 上传 lcov 文件查看行覆盖
拖放 lcov.info 文件，以颜色标示每行代码的覆盖状态。
霍夫线变换演示 - 检测图片中的直线
在绘图板画几条直线，算法自动利用霍夫变换检测并高亮出这些线段。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
ASCII STL查看器 - 3D模型线框显示
加载文本格式的STL模型文件，以线框形式旋转查看它的三维结构。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。
颜色对比度实时分析器 - 多标准WCAG AA/AAA检测
支持任意格式颜色输入，计算对比度并显示WCAG 2.1各级别通过情况，含颜色建议。
PDF 页面提取器 - 选择范围另存新PDF
上传PDF，选择需要保留的页码（如1,3-5），生成仅含这些页面的新文档。
gRPC-Web 一元调用测试器 - 发送请求并查看序列化
输入 gRPC 服务地址和方法，构造 JSON 请求体，观察转为二进制帧并接收响应解码。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
质数检测器 - 在线判断整数是否为质数
输入任意正整数，即时判定是否为质数，并显示其因数分解结果，轻量数学工具。
SVG 精灵图合并工具 - 多个 SVG 图标合成一张
上传多个 SVG 文件，合并为一个 SVG sprite 并生成使用示例代码，减少 HTTP 请求。