官網 Icon 設計不是找免費圖示，而是建立品牌圖示系統
官網 icon 設計的重點不是挑一組好看的免費圖示，而是讓 Favicon、頁面功能 icon、品牌識別 icon 與社群 icon 在同一套品牌圖示系統裡運作，維持品牌一致性、辨識度與掃讀效率。
很多企業在改版官網時，會先搜尋 icon 素材或 Icon Library，但真正該先問的是：這些網站圖示能不能接住品牌的語氣？如果 Logo 很精準，導覽列 icon 卻像從不同套件拼起來，使用者感受到的不是豐富，而是不穩定。多數官網失控，通常不是因為單顆 icon 難看；真正原因是來源太多、規格太少。
Icon 在官網中的 3 個任務
Icon 是官網中用來輔助理解、引導視線與建立品牌記憶的視覺符號。它不該取代文字，也不該只是裝飾，而要幫使用者更快判斷內容層級與行動方向。
輔助理解
在服務區塊、功能列表或流程說明中，icon 可以降低閱讀阻力。例如「諮詢」、「規劃」、「執行」、「追蹤」這類抽象服務，如果搭配一致的線性 icon，使用者能更快理解每個段落的差異。
引導視線
導覽列、CTA、表單提示與狀態訊息中的 icon，常用來提醒使用者下一步。這類 icon 要克制，尺寸、對比與位置都應服務文字主體，不能搶走主要行動。
建立品牌記憶
品牌識別 icon、Favicon 與手機主畫面圖示會反覆出現在瀏覽器分頁、書籤、搜尋結果或分享預覽中。它們是 Logo 的延伸，但不等於把 Logo 縮小貼上。好的品牌圖示系統，會讓使用者在小尺寸裡仍然認出品牌。
官網 Icon 先分 4 種：Favicon、功能 icon、品牌識別 icon、社群 icon
企業官網的 icon 可先分成 4 類：Favicon、頁面功能 icon、品牌識別 icon、社群或外部平台 icon。先分類，才能決定哪些要客製、哪些可用 Icon Library、哪些必須符合技術交付規格。
| 類型 | 主要用途 | 設計重點 | 常見風險 |
|---|---|---|---|
| Favicon | 瀏覽器分頁、書籤、搜尋結果、手機主畫面 | 小尺寸辨識、品牌縮寫、簡化 Logo | 直接縮小 Logo 後糊成一團 |
| 頁面功能 icon | 服務區塊、功能列表、導覽列、表單提示 | 線寬、圓角、留白、狀態一致 | 混用不同套件造成風格破碎 |
| 品牌識別 icon | 強化品牌語氣、分類服務、建立記憶點 | 延伸 Logo、品牌色與版面語言 | 畫得太像插圖，降低可讀性 |
| 社群／外部平台 icon | 連到 Facebook、Instagram、LINE、YouTube 等平台 | 遵守平台識別規範，維持尺寸一致 | 自行改造平台圖示導致辨識錯誤 |
Favicon
Favicon 是網站小圖示，常出現在瀏覽器分頁、書籤與手機主畫面。它最需要小尺寸辨識度，通常會從 Logo、品牌符號或品牌英文首字母簡化而來。
頁面功能 icon
頁面功能 icon 用來協助使用者掃讀內容，例如功能特色、服務流程、常見問題分類或表單狀態。這類 icon 不一定要全部客製，但必須有一致的線寬、圓角、填色邏輯與尺寸。
品牌識別 icon
品牌識別 icon 是比一般功能 icon 更貼近品牌語氣的圖示。例如品牌有明確的幾何語言、手繪感或特定圓角比例，就可以延伸成服務分類 icon。這類圖示最能拉開差異，但也最需要規範。
社群／外部平台 icon
社群 icon 的重點不是創意，而是可辨識與不誤導。企業官網可以統一外框、尺寸與間距，但不宜把平台 Logo 改到難以辨識，尤其是涉及官方品牌資產時要確認使用規範。
從 Logo 轉成 Favicon：小尺寸仍能被認出的設計方法
Favicon 不適合直接把完整 Logo 等比例縮小。比較穩定的做法是先找出 Logo 中最可辨識的符號、字母或輪廓，再針對 16x16、32x32、180x180 與 512x512 做簡化與輸出測試。
不同 Logo 形狀的簡化方式
橫式 Logo 通常不適合直接做 Favicon，因為文字在 16x16 或 32x32 會失去可讀性。圓形、方形或單一符號型 Logo 較容易轉換，但仍需檢查邊界、對比與安全區。
如果品牌只有文字標準字，可以考慮取第一個英文字母、品牌縮寫或筆畫特徵。若 Logo 有圖形符號，可以保留主輪廓、拿掉細節與細線。我通常會把 Favicon 當成品牌識別的壓力測試：縮到最小還看得出來，才代表這個符號真的夠穩。
尺寸輸出與辨識測試
Favicon 的輸出不能只看設計稿。設計師要把圖示放進接近真實的瀏覽器分頁、書籤列與手機主畫面情境，檢查它在亮色、深色、不同背景與高解析螢幕上的辨識度。
16x16
16x16 是最嚴格的小尺寸測試，細線、複雜字母與漸層通常會失真。這個尺寸應優先保留輪廓和對比，不追求細節完整。
32x32
32x32 可呈現稍多細節，但仍應避免過細筆畫。若 16x16 與 32x32 看起來像兩個不同圖示，代表簡化規則還不穩。
180x180
180x180 常用於 apple-touch-icon，會出現在手機主畫面。這裡需要考慮背景色、圓角裁切與品牌色是否仍然清楚。
512x512
512x512 常見於 Web App Manifest 或 PWA icon。這個尺寸可以保留較完整的品牌圖形，但仍要和小尺寸版本共享同一個視覺核心。
| 檢查項目 | 判斷方式 |
|---|---|
| 縮小後是否可辨識 | 在 16x16 與 32x32 下仍能看出品牌符號或縮寫 |
| 是否過度依賴文字 | 移除小字後，圖示仍有獨立記憶點 |
| 深淺背景是否清楚 | 亮色與深色介面都不消失、不髒、不糊 |
| 是否和 Logo 斷裂 | 使用者能理解它與品牌 Logo 來自同一套識別 |
頁面功能 Icon 如何和品牌視覺保持一致
頁面功能 icon 要和品牌視覺一致，關鍵在於先定義視覺語言：線性或填色、線寬、圓角、留白、安全區、網格、品牌色、深色模式與 hover、active 狀態都要有規則。
線性、填色、扁平、3D 該怎麼選
線性 icon 適合乾淨、專業、資訊量高的企業官網；填色 icon 適合需要較強視覺停留的服務入口；扁平 icon 容易維護，也較不干擾版面。3D icon 若沒有完整視覺系統支撐，容易讓官網從專業感滑向素材感。
選擇風格時，不要只看單顆好不好看，要看它是否接得住品牌字體、按鈕、色彩與版面。如果品牌規範偏理性、簡潔，突然放入高光 3D icon，會讓畫面語氣變得不一致。
線寬、圓角、留白、安全區
一套品牌圖示系統至少要定義基準尺寸、線寬、端點形狀、圓角比例、內部留白與安全區。若使用 24px 網格，就要規定 icon 在網格內的最大外框、中心線位置與對齊方式。
如果團隊無法說明「這組 icon 為什麼看起來像同一套」，多半是規格還沒有被寫下來。視覺一致性不該只靠設計師手感，應該寫進品牌規範手冊或設計系統文件中，與 品牌規範手冊、品牌識別設計指南 一起管理。
品牌色與深色模式
頁面功能 icon 不一定要全部使用品牌主色。更穩的做法是先建立中性色、品牌色、警示色與狀態色的使用規則，再決定哪些 icon 可以上色，哪些只用單色。
深色模式下，icon 不能只把黑色改成白色。要檢查對比、透明度、陰影與背景關係，尤其是 hover 狀態、active 狀態與 disabled 狀態。能不用 icon 的地方，就不要硬放；真正需要 icon 的位置，才值得做完整狀態設計。
免費素材、Icon Library、客製設計怎麼選
免費素材、Icon Library、Design System Component 與客製 icon 都能用在企業官網，但選擇標準不同。若只是一般功能提示，可用穩定套件；若是品牌記憶點或核心服務分類，應優先考慮客製。
| 來源 | 適合情境 | 優點 | 風險 |
|---|---|---|---|
| 免費素材 | 低重要性頁面、臨時原型、內部簡報 | 取得快、成本低 | 授權不清、風格混雜、容易撞款 |
| 開源 Icon Library | 後台、文件、一般功能 icon | 數量完整、維護方便 | 品牌感較弱，需要二次規範 |
| Design System Component | 大型官網、多語系、多產品線 | 規則清楚、可長期維護 | 前期整理成本較高 |
| 客製 icon | 品牌首頁、核心服務、關鍵轉換區塊 | 品牌辨識度最高 | 需要明確設計規格與交付管理 |
免費素材可以用在哪裡
免費素材可以用在低品牌風險的位置，例如草稿、內部提案、次要說明頁或暫時性活動頁。但正式企業官網仍要確認商用授權、修改權、標示要求與再發布限制。
什麼情況需要客製 icon
當 icon 出現在首頁第一屏、核心服務分類、品牌特色、產品方法論或重要 CTA 附近，就不宜只靠素材庫拼裝。這些位置會被使用者反覆看到，也會影響品牌記憶，客製 icon 的價值在於讓視覺語言跟 Logo、品牌色與版面共同運作。
授權與維護風險
Material Symbols、Font Awesome、Flaticon、Icons8 等工具或素材來源都可以作為選項，但不能只看是否能下載。企業要保存授權紀錄、版本來源、檔案命名與使用範圍。最麻煩的不是單次下載，而是半年後沒人知道這顆 icon 從哪裡來、能不能改、能不能商用。
Icon 排版如何提升官網掃讀與轉換
Icon 對轉換的作用不是保證提高成交，而是改善掃讀效率、資訊層級與行動辨識。放在服務區塊、功能列表、CTA 與導覽列時，icon 應協助使用者更快理解內容，不應取代清楚文案。
服務區塊 icon
服務區塊的 icon 要讓使用者快速分辨服務差異。例如顧問、設計、開發、維護四項服務，圖示應該在造型上有共同規則，在語意上有明確差異。最差的排版是每張卡片都有圖示，卻看不出各自代表什麼。
CTA 與導覽列 icon
CTA 附近的 icon 應該輔助行動，例如箭頭、下載、預約、搜尋、聯絡等符號。導覽列 icon 則要更保守，因為導覽列承載的是網站結構，不是視覺表演。若 icon 沒有文字標籤，至少要提供 aria-label，避免只靠視覺辨識。
避免裝飾過度
官網不是 icon 展示牆。當每個標題、每個按鈕、每個段落都放 icon，使用者反而失去判斷重點的線索。好的 icon 排版會保留空白，讓圖示只出現在能提升理解的位置。這也和 8pt grid 與間距系統、品牌形象一致性 有關。
技術交付與上線清單：SVG、ICO、apple-touch-icon、Manifest
官網 icon 設計完成後，要交付 SVG、PNG、ICO、apple-touch-icon 與 Web App Manifest 相關檔案。頁面內 icon 多以 SVG icon 管理，Favicon 與手機主畫面圖示則需準備對應尺寸與快取更新方式。
Favicon 與網站小圖示檔案
Favicon 通常會包含 favicon.ico、PNG 版本與 apple-touch-icon。若網站支援 PWA 或希望在手機主畫面有較完整呈現，還要確認 manifest 裡的 icon 設定是否與實際檔案一致。
SVG / PNG / ICO 交付差異
SVG 適合頁面功能 icon，因為可縮放、檔案小，也能配合 CSS 控制顏色與狀態。PNG 適合需要固定像素輸出的場景，例如 apple-touch-icon。ICO 則常用於傳統 Favicon 支援，不應和 SVG、PNG 視為完全互換。
快取更新與前端確認
官網換 Favicon 後，瀏覽器可能因快取仍顯示舊圖。前端交付時要確認檔名、路徑、版本更新、HTML link 標籤、manifest 路徑與 CDN 快取。上線後要用不同瀏覽器與無痕視窗檢查，而不是只看設計稿。
| 交付項目 | 用途 | 檢查重點 |
|---|---|---|
| SVG icon | 頁面功能 icon、SVG sprite、元件庫 | 命名、viewBox、顏色控制、hover 與 active 狀態 |
| favicon.ico | 瀏覽器分頁與舊環境支援 | 是否包含小尺寸版本，路徑是否正確 |
| apple-touch-icon | iOS 手機主畫面 | 180x180 是否清楚，背景與圓角裁切是否正常 |
| Web App Manifest | PWA icon 與手機主畫面設定 | 512x512 圖示、檔案路徑、背景色與主題色 |
| 授權與來源紀錄 | 後續維護與法務確認 | 來源、授權條款、修改紀錄是否保存 |
官網 Icon 設計完成後的檢查表
官網 icon 上線前要檢查三件事：視覺是否一致、使用者是否看得懂、檔案與授權是否可維護。只要其中一項缺漏，網站圖示就可能從品牌資產變成維護風險。
視覺一致性檢查
檢查所有 icon 是否共享同一套線寬、圓角、留白、安全區、填色邏輯與尺寸規則。若同一頁同時出現粗線、細線、實心、漸層、3D 與不同圓角比例，使用者會感覺版面沒有系統。
可讀性與無障礙檢查
Icon 不應承擔全部資訊。重要功能需搭配文字標籤，純圖示按鈕需提供 aria-label。若 icon 用顏色表達狀態，也要確認不只依靠顏色判斷，並檢查亮色、深色與高對比環境下的可讀性。
授權與檔案管理檢查
授權、來源、版本與命名規則要和設計檔一起交付。企業官網通常會長期改版，若 icon 檔案散落在不同資料夾、命名沒有規則、授權紀錄不完整，後續每次調整都會增加溝通成本。
| 檢查類別 | 檢查問題 | 通過標準 |
|---|---|---|
| 品牌一致性 | 是否與 Logo、品牌色、字體與版面語言一致？ | 看起來屬於同一套品牌視覺系統 |
| 小尺寸辨識 | 16x16、32x32 是否仍能辨識？ | 不糊、不碎、不依賴細小文字 |
| 深色模式 | 深色背景下是否仍有足夠對比？ | 圖示不消失，狀態仍清楚 |
| 無障礙 | 純 icon 按鈕是否有 aria-label？ | 輔助科技能理解圖示功能 |
| 授權 | 素材來源與商用授權是否保存？ | 能追溯來源、修改權與使用範圍 |
| 技術交付 | SVG、PNG、ICO、manifest 是否對應正確？ | 前端可直接上線並完成快取確認 |
FAQ
官網 icon 設計和 Logo 設計有什麼不同？
Logo 是品牌識別的核心符號，官網 icon 設計則是把品牌視覺延伸到網站使用情境。Logo 負責辨識品牌，icon 負責輔助操作、分類資訊、引導視線與維持網站圖示一致性。
Favicon 可以直接用公司 Logo 嗎？
如果 Logo 本身是簡潔符號，可能可以直接使用；如果是橫式文字 Logo、細節很多或比例太長，就需要簡化成符號、縮寫或局部輪廓。判斷標準是 16x16 與 32x32 下是否仍可辨識。
免費 icon 可以用在企業官網嗎？
可以，但要先確認商用授權、修改限制、標示要求與來源紀錄。免費 icon 較適合低品牌風險的位置；首頁、核心服務與重要轉換區塊更適合使用客製 icon 或經過整理的品牌圖示系統。
SVG、PNG、ICO 哪一種最適合官網？
頁面功能 icon 通常以 SVG 較方便，因為可縮放、可控制顏色與狀態。PNG 適合固定尺寸輸出，例如 apple-touch-icon。ICO 常用於 Favicon 支援。三者用途不同，不宜直接互換。
為什麼同一頁不能混用不同風格的 icon？
混用不同線寬、圓角、填色與立體風格，會讓使用者感覺版面不穩，也會削弱品牌一致性。同一頁至少要維持相同的視覺語言，讓 icon 服務資訊層級，而不是製造干擾。
官網 icon 需要做深色模式版本嗎？
如果網站支援深色模式，icon 需要檢查深色背景下的對比、透明度與狀態顯示。單純把黑色改成白色不一定足夠，還要確認 hover、active、disabled 等狀態是否清楚。
頁面功能 icon 要不要加文字標籤？
重要功能建議加文字標籤，尤其是導覽、表單、CTA 與關鍵操作。若因版面限制只能使用純 icon，需提供 aria-label，讓輔助科技可以讀出功能，避免只靠視覺猜測。
什麼情況應該做品牌專屬 icon？
當 icon 出現在首頁、核心服務、品牌方法論、產品特色或高曝光轉換區塊時，就適合做品牌專屬 icon。這些位置會影響使用者對品牌專業度與一致性的判斷，不宜完全依賴通用素材。
官網換 favicon 後為什麼瀏覽器還顯示舊圖？
常見原因是瀏覽器、CDN 或網站快取尚未更新，也可能是 HTML link 標籤、manifest 路徑或檔名仍指向舊檔。可用無痕視窗、不同瀏覽器與清除快取後重新檢查。
icon 會影響網站轉換率嗎？
Icon 不保證直接提升轉換率，但會影響掃讀效率、資訊層級與行動辨識。當服務區塊、CTA 與導覽列的 icon 使用得當，使用者較容易理解內容與下一步，轉換路徑也會更清楚。