Favicon是什麼？國際企業品牌公司網站圖示設計運用範例
目錄
什麼是Favicon？
Favicon（網站圖示）是網頁瀏覽器標籤上顯示的小圖示，通常是網站的標誌或一個簡單的圖示。這個詞來自「網站圖示」（Favorite Icon）的縮寫。Favicon 的存在可以讓人更容易識別和區分不同的瀏覽器標籤，也讓用戶更容易找到和記住他們瀏覽過的網站。當你在瀏覽器中打開一個網站時，通常會在標籤的左側看到一個小小的圖示。這個圖示可能是網站的標誌、品牌標誌或者是一個簡單的符號。這不僅僅是裝飾，它還有助於提供更好的網頁使用體驗，讓使用者更容易識別和區分多個開啟的網頁。
Favicon是企業logo的延伸運用
在製作網頁時，我們常常需要處理各種各樣的商標和LOGO，因為它們有著不同的形狀和風格。在一般網頁上，我們可以輕鬆地將原本的LOGO應用在首頁上，而不必擔心空間大小的問題。然而，當我們要設計一個Favicon時，就會遇到一些限制。Favicon是指顯示在瀏覽器標籤上的小圖示，它的尺寸只能是16 x 16px。如果LOGO是正方形或圓形，轉換成Favicon通常不是問題，但如果LOGO的設計比較複雜，或者是長形的，要將所有這些元素塞進一個16 x 16px的方形區域中，就變得有些困難。結果可能會變得模糊，難以辨識。
有鑑於此，我們搜集了一些企業的favicon，觀察一下各大企業網站如何展現他們的favicon。
Favicon運用之一：沿用原本的LOGO圖案
在製作Favicon時，大多數企業會嘗試將完整的LOGO進行縮小處理。由於Favicon的尺寸限制，最適合的LOGO形狀通常是正方形或圓形，這樣可以適應16 x 16像素的空間。此外，LOGO盡量簡化，減少文字和線條的使用，以單純的色塊呈現，這樣在小尺寸下也能清晰呈現。
方形及圓形的LOGO
| 企業品牌名稱 | 原始 LOGO | 網站圖示 Favicon | 企業網址 |
|---|---|---|---|
| Adobe |  |
https://www.adobe.com/ | |
| AT&T | https://www.att.com/ | ||
| Pepsi | https://www.pepsi.com/ | ||
| Starbucks |  |
 |
https://www.starbucks.com/ |
| HP | https://www.hp.com/ | ||
| Snapchat | https://www.snapchat.com/ | ||
| https://www.instagram.com/ |
圓形和方形的LOGO因圖案和元素簡單，即便縮小後也還是能從網頁標籤上輕易辨識網站企業，適合做為favicon使用。以Adobe和HP為例，不過度複雜的設計讓使用者得以一眼認出該網站隸屬於哪間企業。
長方形的LOGO
| 企業品牌名稱 | 原始 LOGO | 網站圖示 Favicon | 企業網址 |
|---|---|---|---|
| IKEA | https://www.ikea.com/ | ||
| FedEx Corporation | https://www.fedex.com/ | ||
| SAP | https://www.sap.com/ |
長型的LOGO能夠展示更多資訊，如企業全稱或加上產業相關的設計元素，但若是用作網站的favicon，為了維持比例可能導致識別度下降。從下圖可以觀察到，和上面提到的HP相比，沒有辦法很快速的辨別出IKEA和FedEx的字樣。
不規則型LOGO
| 企業品牌名稱 | 原始 LOGO | 網站圖示 Favicon | 企業網址 |
|---|---|---|---|
| Burger King |  |
 |
https://www.bk.com/ |
| KFC | https://www.kfcclub.com.tw/ | ||
| McDonald's | https://www.mcdonalds.com/ | ||
| Louis Vuitton | https://fr.louisvuitton.com/ | ||
| Nike | https://www.nike.com/ | ||
| Carrefour | https://www.carrefour.fr/ | ||
| Apple Inc. | https://www.apple.com/ | ||
| UPS | https://www.ups.com/ |
大部份不規則型LOGO是以方形或圓形為基礎去發展，或是增加一些變型，長寬相差不會太大，縮小時可順利維持辨識度，搭配透明背景更能展現其特色。需要注意的是，設計中文字相對多的Burger King雖然維持接近圓形，但縮小後中央的文字幾乎無法閱讀，不過仍然可以透過漢堡形狀來認出這是速食相關產業的網站，從Burger King的favicon可以了解到，除了企業名稱，在整體圖案加上一些巧思亦能增進識別度。
Favicon運用之二：使用經過變化的LOGO圖案
長型LOGO簡化縮短
| 企業品牌名稱 | 原始 LOGO | 網站圖示 Favicon | 企業網址 |
|---|---|---|---|
| https://about.google/ | |||
| Facabook | https://www.facebook.com/ | ||
| Oracle | https://www.oracle.com/ | ||
| Samsung | https://www.samsung.com/ | ||
| Costco | https://www.costco.com/ | ||
| HONDA | https://www.honda.co.jp/ | ||
| Bvlgari | https://www.bulgari.com/ |
長型LOGO縮小後往往難以辨識，因此在設計favicon時，取LOGO第一個字母作為代表，其餘部分省略也是一種選擇，此類型代表如google、facebook等。
改變原有造型
| 企業品牌名稱 | 原始 LOGO | 網站圖示 Favicon | 企業網址 |
|---|---|---|---|
| U.S. Bancorp | https://www.usbank.com/ | ||
| eBay | https://www.ebay.com/ | ||
| IBM | https://www.ibm.com/ | ||
| Visa | https://usa.visa.com/ | ||
| Coca-Cola | https://www.coca-cola.com/ | ||
| Tiffany & Co. | https://www.tiffany.com/ |
原本的LOGO造型複雜，一些公司會將其重新設計，簡化為更單純的圖案。舉例來說，U.S. Bancorp以原LOGO舊有的色塊作為favicon，Tiffany則是直接將他們經典的代表色放上來。
極具巧思的Favicon範例
上面介紹了幾種變化LOGO的方式，現在讓我們挑出幾個幾個令人印象的設計，從中分析他們的特別之處。
Amazon
Amazon原本的LOGO是由文字與黃色圓弧箭頭組成，在設計favicon時巧妙地使用黃色圓弧箭頭搭配首字母a，使簡化後的標誌達成了縮短LOGO的目的，卻又依然保有Amazon的特色。
U.S. Bank
U.S. Bank的LOGO由造型色塊以及穩重的粗體文字組成，運用在favicon時，僅使用最具代表性的色塊，省略其它文字，給人一種簡潔俐落的印象，與其它的企業簡化方式相比，頗具特別。
eBay
eBay使用文字與四種不同的顏色組合成LOGO，在轉換成favicon時，以購物袋取代原本的文字，並將四種顏色融入圖案，保留原本LOGO的代表色，又揭示其購物網站的本質。
因應不同的LOGO形式，設計favicon的方法也有許多不同，這次藉由參考各大品牌的網站，對於favicon的設計，又有一番新的認識。
以上各品牌LOGO皆為各品牌所有，本文僅做為研究使用於網頁上。
資料來源：https://interbrand.com/best-global-brands/
資料日期：2024.1