實用創作流程
將 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，以網站圖示的實際尺寸檢查符號，再交給網站維護者。