UD5工具箱
Favicon 网站图标概念
Favicon（Favorite Icon的缩写）是显示在浏览器标签页、地址栏、书签栏和收藏夹中的小型网站图标。Favicon最初由Internet Explorer 5在1999年引入，后来被所有主流浏览器采纳为标准功能。最常见的Favicon格式是favicon.ico，这是一种包含多个尺寸图标资源的容器格式。现代网站通常还会提供PNG格式的Favicon以支持更高的分辨率和透明效果。Favicon虽然体积小，但它是网站品牌识别的重要组成部分，一个清晰美观的Favicon可以提升网站的专业形象和用户辨识度。Favicon的尺寸通常在16x16到512x512像素之间，不同设备和使用场景需要不同尺寸的图标。
ICO 文件格式详解
ICO是Windows操作系统使用的图标文件格式，也是Favicon的传统格式。ICO文件的独特之处在于它是一个容器格式，可以在单个文件中包含多个不同尺寸和色深的图标资源。例如，一个标准的favicon.ico文件可能同时包含16x16、32x32和48x48三种尺寸的图标。当浏览器或操作系统需要显示Favicon时，会自动从ICO文件中选择最适合当前显示环境的尺寸。ICO格式支持透明色（1位透明），但不支持完整的Alpha通道透明度。现代网站虽然开始使用PNG等格式作为补充，但favicon.ico仍然是兼容性最好的Favicon格式。
PNG 格式图标优势
PNG（Portable Network Graphics）是一种支持无损压缩和Alpha通道透明的位图格式。作为Favicon格式，PNG相比ICO有多项优势：PNG支持完整的Alpha通道透明（256级透明度），可以实现更加精细的边缘抗锯齿效果和半透明效果；PNG文件通常比同尺寸的ICO文件更小；PNG格式的图标在所有现代浏览器中都能被正确识别和加载。常见的PNG Favicon尺寸包括16x16、32x32、48x48、64x64、96x96、128x128、192x192、256x256和512x512像素。
Apple Touch Icon设置说明
Apple Touch Icon是iOS设备（iPhone和iPad）上用于主屏幕网页快捷方式的图标。当用户将网页添加到iOS主屏幕时，系统会使用Apple Touch Icon作为应用图标显示。Apple Touch Icon通过HTML的link标签声明，rel属性值为apple-touch-icon。iOS设备支持多种分辨率的Apple Touch Icon，常见的尺寸包括120x120（iPhone @2x）、152x152（iPad @2x）、167x167（iPad Pro @2x）和180x180（iPhone @3x）。Apple Touch Icon应该使用PNG格式，不建议使用透明背景，因为iOS系统会在图标下方添加圆角裁切效果。
设备像素密度 DPI与PPI
DPI（Dots Per Inch，每英寸点数）和PPI（Pixels Per Inch，每英寸像素数）是衡量显示设备像素密度的指标。高DPI设备（如Retina显示屏）在同一物理面积内包含更多的像素，因此能够呈现更清晰的图像。对于Favicon来说，高DPI设备需要更高分辨率的图标才能在相同物理尺寸下保持清晰。例如，在DPR为2的Retina iPhone上，16x16像素的标签页图标实际上需要32x32像素的图标源文件才能保持清晰。这就是为什么现代网站需要准备多种尺寸的Favicon的原因之一。
渐进式Web应用图标 PWA
渐进式Web应用（Progressive Web App，PWA）是一种能够提供接近原生应用体验的Web技术。PWA需要一组特定尺寸的应用图标来支持安装到设备主屏幕和启动画面等功能。PWA图标规范要求至少提供192x192和512x512两种尺寸的图标，其中192x192用于主屏幕快捷方式，512x512用于启动画面和商店展示。PWA图标需要在manifest.json文件中声明，并且应该使用PNG格式。对于Android设备，还需要考虑图标在不同形状设备上的显示效果。
Windows磁贴图标规范
Windows磁贴图标是用于Windows 8/10/11操作系统开始菜单和任务栏磁贴中的应用图标。Windows磁贴有多种尺寸，每种尺寸需要对应的图标文件。常见的磁贴尺寸包括小磁贴（70x70）、中磁贴（150x150）、宽磁贴（310x150）和大磁贴（310x310）。Windows磁贴图标通过HTML的msapplication-TileColor和msapplication-TileImage标签声明，或者在browserconfig.xml文件中配置。磁贴图标应该使用纯色背景（非透明），以确保在不同Windows主题和背景下的可见性。
响应式图标设计原则
响应式图标设计是指创建能够适应不同显示尺寸和设备类型的图标资源策略。与响应式网页设计类似，响应式图标设计的核心原则是为不同尺寸提供针对性优化的图标版本，而非简单地将一个尺寸的图标缩放到其他尺寸。响应式图标设计建议遵循以下原则：为每个主要尺寸组准备独立的图标文件；在小尺寸下简化图标细节以保持可读性；使用SVG格式作为矢量图标的备选方案；确保图标在浅色和深色背景下都能清晰辨识；考虑图标在不同形状裁切下的表现。本工具的多分辨率检查功能正是响应式图标设计工作流程中的重要环节。