您是否曾注意自己所瀏覽過的網站裡都有網頁icon的存在呢？是否也曾經感到疑惑，怎麼有些網頁icon就像一個按鈕圖示，可單擊瀏覽，而有些區區只是裝飾性作用呢？
你又是否想過要在自己的網站上設計和設置一些與眾不同的小圖示呢？在本文中，我們將解答所有與網頁icon相關的問題！事不宜遲，讓我們開始吧！
內容概述：
1. 什麼是網頁icon （Site Icon）?
2. 網頁icon帶來的視覺效應
3. 網頁icon使文章更具可讀性
4. 額外知識（Favicon）：
5. 內容小結
- 什麼是網頁icon （Site Icon）?
網頁icon用於在網站頁面上傳達概念的一種視覺提示。網頁icon作為一種視覺語言，能夠有效的防止用戶錯誤地理解概念，並確保有效的溝通。網頁icon可以成為商業品牌的一部分，幫助強化品牌的顏色，風格，聲音，和徽標。換句話說，它們是使用戶的視覺效果感覺特別和可識別的一部分，為品牌帶來了與眾不同的用戶體驗。
網頁icon主要作為一個視覺的元素，有效地填充網頁的整體外觀。除此之外，網頁icon也有助於表達指示及方向。作為伴隨內容的視覺提示，用戶將很快的知道網站內容裡表達的是什麼。當網站的用戶體驗有所提升，用戶將在網站停留更長的時間，這也將增加網站的轉化率。
- 網頁icon帶來的視覺效應
在以下所有的網站例子的主頁中，適當地使用網頁icon都有助於強化頁面橫幅部分中所傳達的信息。
首頁是網站的焦點，通常是用户從搜尋引擎第一個接觸的點，網站地圖的中心頁面，以及造訪的人通常造訪其他頁面後會被引導回來的地方。因此首頁應為網站其他頁面確立風格基調，並且利用行動呼籲（按鈕）、或視覺提示引導用戶去其他頁面。
舉例來說，以下的System2Coffee的例子裡，品牌適當地使用了 Strikingly 搭建了該品牌網站。他們在首頁裡運用了品牌logo，以及自然真實的圖像，用簡單的設計表達鼓勵用戶向下滑動。
在這裡，品牌logo就是他們的網頁icon，S2C和咖啡圖像的 logo 在網站首頁里為用戶留下了深刻印象。
圖片取自Strikingly網站:
和多數的網站一樣，Strikingly 网站里具备设计感及功能的模板巧妙地運用了菜單圖標（圖片右上方）作為獨特的導覽列菜單設計。這個菜單小圖示有效地提高了用戶體驗，用戶只需要點擊這個按鈕圖示的菜單小圖示即可找尋他們想要瀏覽的網站頁面。此外，菜單小圖示具備特點的圖標設計，因此也有著非常具備個性的另稱，名為三條橫槓的漢堡圖示。
圖片取自Strikingly網站
網頁icon除了能帶來視覺上的享受，也讓網站更具視覺吸引力。在以下 Wheelys 網站的主頁中，他們使用了小圖示來強化頁面橫幅部分中所傳達的信息。這些小圖示豐富了此網站的信息，區分分佈且強化了網站裡不同的信息部分。網站裡頭的小圖示使網站更易於瀏覽。
圖片取自Strikingly網站
小科普：
社群媒體小圖示（社群icon) 能轉變成連結icon，這些連結icon可將品牌在社群媒體服務的頁面集成到網站當中。用戶在單擊按鈕圖示的社群icon後，將引導他們到品牌的社群媒體體頁面。
此外，Facebook官方提供多種社群媒體插件，包括臉書圖標 (FB Icon)，“贊”按鈕圖示，“關注”按鈕圖示和“共享內容”按鈕圖示等等的插件。這些插件讓用戶在無需離開網站的前提下即可與品牌的Facebook頁面互動。許多網站選擇將這些社群媒體的圖標添加到側邊欄或主頁中顯眼的位置， 例如導覽列，以增加用戶在網站中產生與社群媒體的互動性。
Strikingly 網站的一系列模板即准备且包括了臉書“贊”按鈕圖示，以及推特的“關注”按鈕圖示，等等的社交媒体服务需求。
圖片取自Strikingly網站
- 網頁icon使文章更具可讀性
網頁icon打破了內容塊，使網頁內容段落更具可讀性。
除了將小圖示運用在內容裡，適當地將網站icon添加到頁面空白部分，會帶來視覺的呼吸空間，提升網站的整體設計，是網站更具可讀性。 Baby Fresh 在 Strikingly 製作該品牌網站時即對網頁icon進行了巧妙的設計，頁面無需太雜亂或文字過多，同樣能讓用戶快速了解 Baby Fresh 所提供的服務已經該品牌的獨特的銷售主張（USP）。網頁icon能將用戶的注意力轉移到頁面的特定部分，將目光投射到提供的服務上。
另外很重要的一點是，設計的網頁圖標應該適當地和網站的整體設計和顏色有關聯，否則會很突兀。顏色不僅能統一網站風格，也是個能影響用戶的情緒和感知的強力工具。
圖片取自Strikingly網站
- 額外知識（Favicon）：
你可能還聽說過 Favicon 這個術語。這是顯示在瀏覽器標籤上的標題旁邊的小個性化圖標。 Favicon 通常是品牌徽標的迷你版本。 Favicon除了可以顯示於瀏覽器標籤中，也可置於書籤列表，這樣，當您的訪問者在瀏覽器窗口中打開大量標籤時，他們會很容易注意到您的網站。此外，您的網站會看起來更加的專業。
圖片取自Strikingly瀏覽器標籤
Favicon也有助於品牌在網站頁面上傳達概念的視覺提示。它們可以作為一種視覺語言來防止用戶錯誤地解釋概念並確保有效的溝通。
那么我们应该如何更改Favicon呢？
在設計好您的網頁icon模板後，即可以將其上傳到您的網站。 為了讓您完美地做到這一點，Strikingly 為您列出了有關如何添加網站圖標的基本步驟。 只需按照這些操作，您的Favicon圖標就完成了！
第一步：點擊“設置”
第二步：選擇“基本資料”，上傳製作好的Favicon
第三步：上傳您的Favicon圖像後，不要忘記選擇“保存”選項。
第四步：檢查您所做的更改是否已保存后，選擇並單擊“發布”。
- 內容小結
圖標可以被普遍理解。雖然創建多語言的網站並不難，但圖標也是一種不限於語言或國家都能理解的傳達信息的好方法。
如果您的網站想要融入更多有趣的網頁icon，Strikingly 網站具備了許多現成的圖標供您選擇。
最後，避免過多的使用圖標以導致網站頁面的混亂，這會對整體設計產生負面影響。
請記住這一點：在有意義的地方使用圖標！
圖片取自Strikingly網站
作為一個用心為新手服務的架站平台，Strikingly 不僅在架設網站上十分出色，它的部落格也為大家提供了其他行銷方面的豐富知識，供大家學習！現在來Strikingly註冊成為會員，你不僅可以用上功能齊全的免費版本，還可以享受14天全部套餐的免費使用哦！想要改善自己的網路行銷、獲得更多收益的話，那就快來Strikingly管理自己的網站吧！
如果對內容有疑問，可以透過 support@strikingly.com 與我們聯絡。
