Favicon(网站图标)
定义:Favicon 是 Favorite Icon 的缩写,是网站在浏览器标签页、书签栏、收藏夹中显示的小型图标文件。它通常是一个 16x16 或 32x32 像素的小图标,是网站品牌识别的重要视觉元素。
与本工具的关系:本工具的核心功能就是帮助用户生成适配各种平台和浏览器的全套 favicon 图标文件,解决手动制作多尺寸图标的繁琐问题。
favicon.ico
定义:favicon.ico 是传统的 Windows 图标格式文件,扩展名为 .ico。它最大的特点是在单个文件中可以包含多种尺寸的图标(如 16x16、32x32、48x48),浏览器会根据使用场景自动选择合适的尺寸。
与本工具的关系:本工具会自动生成包含多尺寸的 favicon.ico 文件,同时输出 PNG 格式的 favicon 供现代浏览器优先使用,确保新旧浏览器全覆盖。
Apple Touch Icon
定义:Apple Touch Icon 是 iOS 和 iPadOS 设备上,用户将网页添加到主屏幕时显示的图标。Apple 官方推荐使用 180x180 像素的 PNG 格式图标。iOS 系统会自动为图标添加圆角和阴影效果,因此只需提供正方形图标即可。
与本工具的关系:本工具的"Apple / iOS 图标"标签页专门生成符合 Apple 规范的 180x180 Apple Touch Icon,用户无需手动调整尺寸。
Web App Manifest(manifest.json)
定义:Web App Manifest 是一个 JSON 格式的配置文件,用于向浏览器声明网页应用的信息,包括应用名称、图标、启动 URL、显示模式等。它是实现 PWA(渐进式 Web 应用)的关键配置之一,Android Chrome 浏览器通过读取该文件来获取网站图标信息。
与本工具的关系:本工具可自动生成 manifest.json 文件,其中已包含所有 Android / PWA 图标的路径和尺寸配置,支持自定义网站名称,下载后即可使用。
PWA(渐进式 Web 应用)
定义:PWA(Progressive Web App)是一种使用 Web 技术构建的应用程序,通过 Service Worker、Web App Manifest 等技术,使其具备类似原生应用的体验,包括离线访问、推送通知、主屏幕快捷方式等功能。
与本工具的关系:本工具生成的 512x512 大尺寸图标正是 PWA 安装时闪屏和高质量展示所必需的,manifest.json 的生成也为 PWA 部署提供了必要配置。
Microsoft Tiles(Windows 磁贴)
定义:Microsoft Tiles 是 Windows 8/8.1 和 Windows Phone 开始屏幕中显示的应用快捷方式图标。网站可以通过配置特定尺寸的磁贴图标,使用户将网站固定到开始菜单时显示自定义图标。磁贴图标有 square70x70logo、square150x150logo 等多种尺寸要求。
与本工具的关系:本工具的"Windows 磁贴"标签页可自动生成所有必需的 Microsoft Tiles 图标尺寸,尽管 Windows 磁贴使用率在下降,但提供完整图标仍是最佳实践。
PNG 格式
定义:PNG(Portable Network Graphics)是一种无损压缩的位图图形格式,支持透明背景(alpha 通道),是网络图标最常用的图片格式。相比 JPEG 格式,PNG 在保存带有锐利边缘和透明区域的图标时质量更好。
与本工具的关系:本工具推荐用户上传 PNG 格式图片作为源文件,因为 PNG 的透明背景特性最适合制作 favicon,且工具输出的各种尺寸图标也采用 PNG 格式。
rel="icon" 与 rel="apple-touch-icon"
定义:这两个是 HTML <link> 标签中的 rel 属性值,用于声明链接资源的类型。rel="icon" 表示标准网站图标(favicon),rel="apple-touch-icon" 表示 Apple 设备触摸图标。浏览器通过这些属性值来判断应该在什么场景下使用对应的图标文件。
与本工具的关系:本工具生成的 HTML 代码中已包含正确设置 rel 属性值的 link 标签,用户复制粘贴后即可在各平台正确引用对应的图标文件。
UD5工具箱