Logo 资源生成最佳实践

为什么正确的 Logo 资源生成很重要

大页眉中的 Logo 在小标签或启动器裁切中可能丢失细节。按真实展示位置准备图稿并检查输出，不应把缩放完成当作兼容性证明。

从正确的源文件开始

矢量 vs 栅格

矢量格式 (SVG) 是理想选择，因为它们：

• 无限缩放而不损失质量
• 简单设计的文件大小更小
• 允许程序化颜色更改
• 原生支持透明度

栅格格式 (PNG) 在以下情况下效果最好：

• 您的 Logo 包含照片元素
• 您有复杂的渐变或效果
• 您需要像素级控制

推荐的源文件规格

优先准备方形 PNG 或自包含 SVG。需要 1024px 输出时，源位图不小于该尺寸可避免放大，但这不是所有工具的统一输入下限。PNG 可透明，JPG 不可透明；大小限制以具体工具为准，上传工作流当前为 10 MB。

多平台使用的设计考虑

安全区域和内边距

留白取决于形状和展示位置。512px maskable 图标的中心安全圆半径为 204.8px，四边 10% 描述的是圆的边界，不是边长 80% 的安全方形。具体几何见 manifest 规范和 PWA 指南。

颜色和对比度

比较深浅背景，让标志保持可辨。WCAG 的 4.5:1 适用于普通文字和文字图像等特定情形，Logo／品牌文字有明确例外，不能作为所有 Logo 的统一批准线。参阅 W3C 对比度说明。自动质量分数不等于 WCAG 测量。

为小尺寸简化

下载原创 SVG和真实 favicon 包，按实际尺寸查看 16px、32px、48px 图像，比较 F 形镂空和边缘。先简化细线和复杂文字，再用 Favicon Preview比较背景；模拟不是浏览器兼容认证。

特定平台要求

网站图标

按实际场景检查 16px、32px、48px 等 ICO／PNG。SVG 需由对应工具提供并在目标环境验证，不应把一份尺寸列表写成所有浏览器统一必需。

Apple Touch 图标

Apple Touch 工具准备 180px 不透明方形 PNG，外部形状由设备应用。原生 iOS 资产使用另一套包；网站图标仍需在相关设备测试。

PWA 图标

按场景准备标准与 maskable 图稿。本站导出 192px、512px PNG，Chrome 安装推广条件也包含这两个尺寸，但它们不是 manifest 规范对所有环境的统一最小要求。参阅 PWA 指南。

社交媒体

上传工作流提供 1200×630 横向 PNG 和方形版本，这是输出选择，不是所有平台要求。封面与视频缩略图应另做排版，并测试真实分享；参阅社交图片指南。

质量验证清单

按真实尺寸检查小图，核对安全圆、透明度、文件引用与公开响应，再到目标浏览器和设备验证。上传报告是图像统计启发式与基础文件检查，不是认证。

有效使用 Logo Foundry

上传提示

1. 使用可用的最高质量源文件
2. 尽可能选择 SVG 而不是 PNG
3. 确保您的 Logo 居中且有均匀的内边距
4. 从源文件中删除不必要的元素

生成后审查

查看导出文件与上传报告，再测试公开网址和相关设备。自动分数不是 WCAG 审计、安全区认证或商店认可。

要避免的常见陷阱

❌ 使用低分辨率源文件 - 导致小图标模糊
❌ 忽略安全区域 - 在某些平台上导致裁剪
❌ 为大尺寸过度设计 - 小尺寸时细节丢失
❌ 忘记深色模式 - Logo 在深色背景上不可见
❌ 跳过验证 - 错过平台要求

结论

保留源图，检查小尺寸输出，再到各实际场景验证。工具提供文件，项目与设备检查才能确认实现效果；文档问题可通过关于与联系反馈。