前言：為什麼你的 Favicon 總是模糊？

給博客加 Favicon（瀏覽器地址欄左側小圖標），做好 16×16 像素圖放進主題包，卻發現特別模糊，別人的卻清晰銳利。原來 Windows 縮略圖預覽按 48 像素顯示，16 像素圖被強制放大當然糊了！關鍵在於：.ico 格式可將多尺寸圖片打包在一個文件中，不同環境自動調用對應尺寸，如同一個大袋裝著同款不同大小的玩具。

完整製作流程六步走

步驟 1：裝插件——讓 PS 支援 .ico 導出

PS 原生不支援 .ico，需下載 ICOFormat 插件 放入 Plug-ins/File Formats 目錄，重啟 PS 即可直接「另存為」.ico。

步驟 2：大畫布設計，再縮小——保證清晰度

• 先在紙上草圖，定方案。
• PS 新建 64×64 像素 畫布設計（16px 太小難操作）。
• 完成後用 Image → Image Size，重採樣選 Bicubic Sharper（雙三次銳化），縮至 16×16。此算法專為縮小銳化設計，最大程度保留細節。
• 關鍵檢查：務必以 100% 視圖檢視 16px 實際效果，不滿意回頭改 64px 源圖，直到縮小後仍清晰銳利。

步驟 3：導出 64px 基礎 .ico

PS 中另存為 .ico，得到 64px 版本。

步驟 4：用 Sib Icon Studio 打包多尺寸

為覆蓋不同場景（任務欄 16px、桌面快捷方式 48px 等），需打包 16/32/48px 到同一 .ico：

1. 用 Sib Icon Studio 打開 64px .ico。
2. 點「New Image Format」添加 48px 和 16px 格式到右側列表。
3. 保存，完成多尺寸打包。

步驟 5：部署到網站根目錄

將 favicon.ico 放入 WordPress 主題根目錄（與 index.php 同級）或服務器根目錄。在 header.php <head> 區添加：

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

無此代碼圖標不會顯示。

步驟 6：測試與強制刷新

• 瀏覽器強制刷新（Ctrl+F5）或清除緩存。
• 或在 URL 末尾加「?」欺騙瀏覽器視為新頁面。

靈感庫：18 款精美 Favicon 欣賞

小小 16×16，也能承載品牌辨識度。用心打磨每一像素，就是對用戶體驗最微觀的尊重。