完整剖析 3 種 Favicon 設計方式,讓你的網站更有專業感!
還記得幾年前剛開始當介面設計師,好不容易將網站都設計好了、也順利上線了,但在網站的收尾工作準備要開始進行時,工程師冷不防要跟你收「Favicon」,那 Favicon 到底是什麼呢?
Favicon 是什麼?
其實 Favicon 就是網站分頁上面的小 Logo ,Favicon 是 Favorites Icon 的縮寫,只要有使用瀏覽器開網頁的朋友都一定會看到 Favicon,但手機上好像就比較少會看到,畢竟它就是在多個分頁標籤中,幫助你可以去分辨哪個頁籤是屬於哪個品牌的網站 LOGO。
Favicon 的功能
Favicon 除了上述提到的,在網頁瀏覽器開啟多分頁的情況下,能幫助使用者來去分辨頁籤的歸屬之外,它還有以下幾種優秀的功能:
1.加強品牌識別
如果本身有設計過 LOGO 或上過品牌識別的課程,應該都有聽過「LOGO 就是企業的臉」這類的概念吧!因為 LOGO 代表的就是企業本身,所以將企業的 LOGO 使用在 Favicon 上,容易幫助使用者在開啟網頁的時候,無意間增強對該品牌的視覺印象,也為品牌識別的整體性與統一性加分喔!
2.加強專業感,提升信任度!
再來說說如果沒有上傳專屬的品牌 LOGO Favicon ,網站就會使用瀏覽器的預設 Icon 幫你取代原本 Favicon 的位置,以 Google 瀏覽器來說就會呈現類似下面的灰色地球。
或是會呈現你架站時使用的平台 LOGO,比如說我用 Webflow 架站,如果沒有上傳自定義的 Favicon,出現的就會是 Webflow 自己的品牌 LOGO (誰要幫他們宣傳啊!),不管是以上哪種情況,沒有特別設計 Favicon 就很容易讓人有種網站沒做完的感覺,看起來很不可靠!
因此,為了讓你的網站更專業、能夠讓人信任,Favicon 這種小細節千萬不要忘了唷!
Favicon 到底要怎麼設計
說歸說問題又來了!因為 Favicon 的尺寸就是一個很小的正方形 (16×16、32×32 和 48×48),但並不是所有的品牌 LOGO 都剛好是正方形的比例,就算是正方形的比例也要確保縮這麼小還可以看得清楚!
該怎麼辦?其實幾種方式可以幫助你破解難題:
1.擷取 LOGO 的一小部分
擷取 LOGO 中的一小部分,這種方式是非常常見到的,尤其是用英文字當作 LOGO,沒有其他可以使用的象徵符號的時候,通常都會抽取第 1–2 個英文字母當作 Favicon。
2.直接使用現有 LOGO
有些品牌 LOGO 的組合是由「圖像 + 文字」組成,那這樣的組合在 Favicon 的設計上就非常方便,直接把圖像部分縮小即可。當然有些 LOGO 圖像部分比較細緻,直接縮小有看不清楚的可能,所以設計師也會特意在 Favicon 上刪減細節,加強識別度。
就像童年動畫《庫洛魔法使》的原畫師,會根據庫洛牌在畫面中所呈現的大小來呈現不一樣的細節,如果卡牌在畫面中很小,就會省略更多筆畫,卻不會因此看不出是哪張牌! 如果維持一樣的細節度,在畫面中卻被縮得很小,那卡牌只會縮的糊成一坨黑黑的,反而不易辨認!
3.重新設計一個!
如果本身 LOGO 設計,剛好沒有象徵性的圖標可以使用,許多企業就會選擇再另外設計一款專本的 Favicon,保留原本 LOGO 的識別特色,包含品牌色或字母、形狀等視覺象徵,重新衍生成一個新的 LOGO,我認為這也是一個很好的方法!
希望透過這篇文章可以幫助大家更了解 Favicon 的設計方式,新手設計師聽到這個陌生的名詞,就不要像當初的我一樣手足無措了唷!
也推薦幾個製作 Favicon 上好用的工具給大家!
Favicon 產生器,幫你產生符合規範的尺寸: https://www.ifreesite.com/favicon/
Figma 的 Favicon mockup,雖然好像有點廢但有些時候意外地好用,例如要 Demo LOGO 提案給業主看的時候:
最後工商一下,準備好久的排版線上課終於上線預購啦!
有興趣歡迎點擊連結了解 ↓