实用创作流程
把 AI 标志做成网站图标：先检查 16 像素是否清楚
咖啡店的文字标志在招牌上很优雅，到了浏览器标签里却可能只剩一团黑。网站图标需要可辨认的符号和真实的小尺寸文件，不能只把大标志缩小看看。
虚构陶器店使用杯把留有开口的简洁杯形。制作网站实际使用的小图标文件时，要保留这一识别特征。
先选符号，再考虑缩小
在 Ciyo 打开标志，找出不用阅读店名也能认出的部分。网站图标版去掉口号和次要装饰，完整文字标志仍用于网站页眉。
单独简化的图标有时比保留所有细节的缩小版更忠实于品牌。保持轮廓和已确认的配色关系。
准备干净的原稿
需要矢量化时使用 Vector 工具，再检查导出的 SVG：有没有背景矩形、被切掉的部分或多余痕迹。矢量化不会自动把复杂图形变简单。
符号四周留出足够空间。不要为了紧贴最外层像素裁切，让杯子把手挤到边缘。制作不同尺寸前先保存原稿。
从这个标志提取杯子符号，制作网站图标原稿。保留把手开口，去掉文字，使用象牙底色与炭灰色，并在正方形中居中。展示 16、32、64 像素预览。指出哪些细节消失，不要直接宣布所有尺寸都合格。按用途导出真实文件
让设计代理在文件工作区制作所需尺寸的 PNG，以及包含指定小尺寸条目的真正 ICO。把 PNG 改名为 .ico 只改变文件名，不改变编码格式。
较大的 PNG 可以用于网站其他位置，小 ICO 用于浏览器。核对网站平台要求，交付时说明每个文件的用途。
| 文件 | 示例尺寸 | 检查内容 |
|---|---|---|
| PNG 预览 | 16 × 16 | 剪影与把手开口 |
| PNG 预览 | 32 × 32 | 边缘与居中 |
| 较大 PNG | 64 × 64 | 正方形尺寸与品牌颜色 |
| ICO | 16 与 32 像素条目 | 实际编码条目，而非仅看文件名 |
每个尺寸都按原始大小查看
在简单页面上按一个图片像素对应一个屏幕像素显示预览，检查浅色与深色周边。放大适合分析边缘像素，但不能替代原始尺寸测试。
如果 16 像素下把手开口闭合，就扩大空隙或简化内部。继续给大原稿加细节没有帮助。记录哪个小尺寸需要单独调整。
验证网站链接与文件响应
把文件和预期图标链接交给网站维护者。直接打开已提供的文件地址，确认存在且内容类型正确，再打开测试页面检查浏览器标签。
Google 的网站图标文档还要求正方形、可抓取的主页与图标 URL，以及稳定的 URL。浏览器显示与 Google 搜索显示是两项独立检查，不能互相保证。
单独的浏览器测试页以一个图像像素对应一个 CSS 像素显示实际的 16、32、64 像素 PNG，也解码了 ICO 中的 64 像素图像。ICO 是在 Ciyo 之外用未改动的 PNG 单独打包的；文件检查确认了三个内嵌尺寸和原始字节。这只是样例文件在 Chrome 中的测试，不能证明 Google 搜索会显示图标，也不能证明所有浏览器都会选择同一个内嵌尺寸。
在品牌交付中保留小图标版
把图标原稿、导出文件和已确认的原始尺寸预览与完整标志放在一起。后续设计者应能知道哪个符号通过了检查、用了哪些颜色。
网站仍显示旧图标时，先检查链接与实际文件再重画。浏览器缓存或搜索处理延迟，与图形本身不可读是不同问题。
常见问题
PNG 直接改名为 ICO 可以吗？
不可以。文件需要 ICO 编码，必须检查导出文件及其包含的尺寸。
网站图标要写店名吗？
小尺寸通常更适合简单、可识别的符号。完整文字标志留给较大位置。
Google 会立即显示新图标吗？
不会保证立即显示。Google 需要处理可抓取的图标与主页，文档也不保证一定展示。
先把小尺寸做好
把标志带到 Ciyo，按网站图标的实际尺寸检查符号，再交给网站维护者。