身為新手站長的你想不想要自己網站分頁的 Logo 小圖示是自己網站的標誌呢? 如果沒有去調整的話,打開自己網站就會是預設的 Wordpress Logo沒有辨識度。
這篇文章跟 Wei 一起 教你怎麼調整自己網站的獨特小圖示喔!
一、Logo小圖示 = Favicon ?
現代人在使用網路時肯定都是一次開很多個分頁,那我們都是用什麼來分辨這麼多個網站呢?
對啦,就是分頁最前面的小圖示對吧?
所以如果你的網站的小 Logo沒有更換的話,會讓你的辨識度降低喔!尤其你是不是也常常一次開好多個分頁幫助你找到最完整的答案呢?這時候在茫茫分頁中,有個明顯有標誌性的Favicon就可以讓你在眾多分頁中脫穎而出喔!
Favicon 網站小圖示是什麼?
Favicon 其實就是 favorites+icon 的縮寫,是證明網站跟網頁相關聯的圖示(讓你看到圖示就知道分頁是屬於哪個網站),也可以稱為 website icon 、 page icon 、urlicon 。
Favicon主要出現在兩個地方:
- 分頁最前面
- 搜尋結果頁
- 被儲存在書籤、我的最愛時


Favicon 的尺寸與規定
支援格式:最常使用JPEG、PNG也最多瀏覽器支援
尺寸大小:網站小圖示必須是正方形,且邊長為 48 像素的倍數,例如 48 x 48 像素、96 x 96 像素、144 x 144 像素等等

參考資料:
Favicon 小圖示應該要怎樣設計?
網頁的 Logo 小圖示除了有檔案格式跟大小的限制外,並沒有其他規定所以可以有很多種呈現方式。
如同Google 的小圖示是圓形的,Wei 自己的也是;Notion的小圖示就是透明去背的看起來是立體的;也有很多網站就是一班的正方形。
Wei 這邊提供幾個方向給大家參考,讓妳思考自己網站的 Favicon 可以更有辨識度喔!
從首頁大圖、Logo延伸發想
從網站原本就有的主視覺或是 Logo 去發想、簡化成 Favicon 小圖示,再訪客尋找你的網站時可以對網站整體更加印象深刻、也讓你的網站更有整體性
從網站名稱去發想
像 Wei 自己的 Favicon 小圖示就是從我的網站名稱「PLUSwei-小菜雞的學習筆記」中的英文字P跟W去做設計。當這兩個字一直出現在訪客眼中時,我的網站名稱也是無形之中被記住了呢!
避免顏色、細節過多
剛剛有介紹 Favicon 平常出現在訪客眼中的的尺寸就是這麼小,如果包含了太多細節跟顏色,看起來就都是糊在一起。所以 Favicon 小圖示的原則就是顏色、細節都以簡單為主。
各大網站 Favicon 小圖示分享
這邊 Wei 列舉了很多知名網站的 Favicon 小圖示,可以看到雖然很小但是卻起到非常關鍵的作用。
Favicon讓你就算不知道網頁名稱是什麼,看小圖示也知道是哪一個網站,所以一定要多多加強跟自己網站的連結性。
比較明顯的 Favicon 有幾種:圓形的(Google、Facebook、104人力銀行)、方形的(有像LINE正方形,也有Youtube長方形的)、去背特殊造型(像Netflix就是很經典的N造型、twitter經典的藍色小鳥造型)

二、PLUSwei 自己的 Favicon 如何呢?
更換前
以「PLUSwei」為例,Wei是使用 Wordpress 系統自己架站的,所以如果沒有調整,預設就會是 Wordpress Logo,顯得很沒有鑑別度網站也沒有很用心的經營的感覺。

更換後
Wei 將網站的 Favicon 換掉後變成這樣~
是不是一眼就可以看得出來呢?這樣當同時有好多個分頁而你的網站名稱被省略時,訪客就可以直接由你的 Logo 知道哪一個才是你的網頁喔!

而且網站瞬間就變得高級、專業了起來了有沒有! 超級簡單的一個動作,讓你網站的質感有大大的提升!
所以推薦大家真的想要用心經營的話一定要有專屬的 Favicon 小圖示啊~
三、教你怎麼三分鐘完成Favicon
這邊Wei 跟大家推薦新手一個超級方便的網站,可以讓你免費、快速的製作自己獨一無二的網站小logo喔!
網站名稱:Favicon Generator
即時反映出設計中 icon

這個網站對於跟Wei一樣新創站的網站主非常非常友善跟便利,第一當然是免費使用、第二是網站操作非常直觀簡單、再來是他有多種顏色、字體跟形狀,對於Favicon這種體積很小的圖案來說,我覺得已經非常足夠了。
步驟一:設計
進到網站後直接就是製作的主要頁面,這邊幫大家把英文介面翻譯成中文參考,但是這個網站本身製作方式就很直觀,大家嘗試操作看看也可以看得出來這些選項代表哪些意思喔。
這個網站有個超級貼心的設計,就是會將我們正在設計中的icon即時顯示在分頁Favicon的的位置是不是很棒!
這樣我們就可以即時看到成果,包含夠不夠顯眼、會不會太複雜、有沒有跟網站風格搭配等等⋯⋯

步驟二:下載
設計完後就按下網頁右上角的 Download 就可以得到一個壓縮檔


解開壓縮就可以得到好幾個尺寸的png檔、ico檔也有,最後就是放到指定位置啦~
步驟三:以Soledad主題為例

在後台進入「外觀>自訂」
找到「General > General Settings」


就可以看到「Upload Favicon」囉!
上傳完後應該就可以看到網站的小圖示從原本預設的 Wordpress logo 變成自己設計的圖了吧~
自己設計的就算超級簡單但是跟預設的感覺起來就是不一樣嘿嘿
跟我一起嘗試吧!
看完Wei 更新網站小 logo(Favicon)後有沒有很心動啊?