UD5工具箱
第一步：上传图标源文件
打开全平台 Favicon 生成器页面，您可以通过两种方式上传图片：直接将图片文件拖拽到页面中的上传区域，或者点击上传区域选择本地文件。工具支持 PNG、JPG、SVG、WebP、GIF 等多种图片格式。建议上传至少 512x512 像素的正方形图片以确保各平台图标均能获得清晰的输出效果。如果上传非正方形图片，工具会自动从中心裁剪为正方形。
第二步：预览并检查各平台图标
图片上传后，页面会自动将图片转换为各平台所需的各种尺寸图标。您可以在标签页中分别查看四个分类的结果：标准 Favicon（浏览器标签页图标）、Apple / iOS 图标（Apple Touch Icon）、Android / PWA 图标（Chrome 和 PWA 图标）、Windows 磁贴（Microsoft Tiles）。逐一确认每个标签页中生成的图标质量和尺寸是否符合预期。
第三步：配置 manifest.json 网站名称
在下载 manifest.json 之前，您可以在页面中设置网站名称。该名称将被写入 manifest.json 文件中的 name 和 short_name 字段，用于 Android PWA 安装后在设备上显示应用名称。填写您的网站名称或应用名称，确保与品牌标识保持一致。如果不设置，manifest.json 中的名称字段将为空。
第四步：下载图标文件
根据您的需求选择下载方式：点击"打包下载全部图标"按钮可将所有平台的所有图标文件及 manifest.json 打包为 ZIP 文件一次性下载，这是最推荐的方式。如果您只需要传统的 favicon.ico 文件，可以点击"下载 favicon.ico"按钮单独获取。ZIP 包中的文件命名规范，解压后可直接上传到网站服务器使用。
第五步：复制 HTML 代码
点击"复制 HTML 代码"按钮，即可获取完整的 <head> 标签代码片段。这段代码包含了指向 favicon.ico、apple-touch-icon.png、manifest.json 等所有图标文件的 link 标签，以及必要的 meta 标签。将复制的代码粘贴到您网站 HTML 文件的 <head> 标签内合适位置即可。
第六步：部署到网站服务器
将下载的所有图标文件上传到网站的根目录（推荐 favicon.ico 放在根目录，因为部分旧浏览器会默认请求 /favicon.ico），或将所有图标文件放入专门的 /icons/ 目录中。确保 HTML 代码中的文件路径与服务器上的实际文件位置一致。如果使用了相对路径，图标文件和 HTML 文件的相对位置需要匹配。
第七步：验证图标是否生效
部署完成后，通过以下方式验证图标是否正确生效：在浏览器中直接访问 https://您的域名/favicon.ico 查看传统图标是否正常显示；在浏览器标签页中确认网站图标已更新；使用浏览器开发者工具的 Network 标签检查图标文件是否正常加载无 404 错误；对于 PWA 图标配置，可使用 Chrome 的 Lighthouse 审计工具进行检查，确保 manifest.json 中的图标配置正确无误。