製作一個不會像垃圾的 Favicon

現在打開你的瀏覽器分頁。你能僅透過 favicon 識別多少個?

可能大部分。那個 16x16 像素的正方形正在為品牌識別做重要的工作。Google 的彩色 G。Twitter 的鳥。GitHub 的章魚貓。你立即認識它們。

然後是你的網站,用著預設的空白頁圖示。或者更糟,一個在 500 像素時看起來很棒但在 16 像素時變成無法識別的模糊的 Logo。

為什麼 Favicon 被忽視

大多數人設計他們的 Logo,建立他們的網站,並在最後一刻才想起 favicon。「只是把 Logo 縮小」似乎合理。它很少有效。

16x16 像素的詳細 Logo 變成泥巴。文字無法辨認。細線消失。顏色混合在一起。

好的 favicon 是為小尺寸設計的,而不是從大尺寸改編的。

什麼在小尺寸下有效

簡單的形狀。 單個字母。基本幾何形狀。2 秒內可識別的東西。

高對比。 深色背景上的淺色或淺色背景上的深色。微妙的漸層在小尺寸下消失。

粗線條。 細筆劃消失。粗、清晰的形狀在縮小時倖存。

有限的顏色。 最多兩到三種。複雜的調色板變成雜訊。

你實際需要的尺寸

瀏覽器、作業系統和裝置都請求不同的尺寸:

• 16x16 - 瀏覽器分頁(關鍵的一個)
• 32x32 - 工作列、捷徑
• 48x48 - Windows 桌面
• 180x180 - Apple touch 圖示
• 192x192 - Android Chrome
• 512x512 - PWA 啟動畫面

你可以手動創建每個尺寸。或者使用從一個來源圖片輸出所有尺寸的生成器。

常見錯誤

使用你的完整 Logo。「RunToolz」作為 16 像素的文字?無法閱讀。使用圖示部分,或創建一個簡化版本。

忘記深色模式。 你的黑色圖示在深色瀏覽器主題上消失。考慮添加微妙的邊框或製作淺色版本。

忽略背景。 有些情境在白色上顯示 favicon,有些在深色上,有些在你選擇的顏色上。測試所有三種。

低解析度來源。 從至少 512x512 開始。縮小有效。放大會產生模糊。

快速流程

1. 從你的 Logo 或品牌標記開始
2. 簡化為最可識別的元素
3. 首先讓它在 16x16 下有效
4. 從那裡放大,只在有幫助的地方添加細節
5. 在實際的瀏覽器分頁中測試,而不僅僅是你的設計工具

---

Favicon 是將精緻網站與業餘網站區分開來的小細節之一。做好需要 10 分鐘。每次有人瞥一眼他們的分頁時都會有所不同。