文章最後更新於 2023 年 7 月 5 日
Favicon網站小圖示更換，大概是架站容易忽略的小細節之一，看似小小的icon圖示，想不到學問也有點多，不過因為是採用Soledad佈景主題，進入外觀/自訂當中上傳檔案即可，也算是蠻方便的。和我一樣使用Soledad佈景主題(或者佈景主題都一樣吧？)直接點擊目錄看設定位置吧~
學習WordPress架站推薦購入網站帶路姬所著「用WordPress打造賺錢副業」
∣ 購買soledad佈景主題 ∣
∣ 更多WordPress佈景主題 ∣
Favicon網站小圖示是什麼？
Favicon是個縮寫，引述維基百科說法：
Favicon是favorites icon的縮寫，亦被稱為website icon、page icon或urlicon。
Favicon是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示，而目前也有很多網頁瀏覽器支援此功能。
就是位在瀏覽器分頁、網址上方的小圖示，做得清楚得化識別度還蠻高的，像是FB、IG、YT，如果沒換就是WP原本的logo，換上自己的小icon之後專屬感倍增。
Favicon圖示轉換/產生器
按照Google的規範和語法，又是一長篇敘述，不過可以得知圖示就是要正方形，且邊長為 48 像素的倍數，例如 48 x 48 像素、96 x 96 像素、144 x 144 像素等等，如為 SVG 檔案則不限定尺寸。
同時要轉換為ico格式的圖片。
網站的圖示我覺得比起logo難設計，因為實在太小了，又要簡潔明瞭，甚至要去背才好看，不然設計繁複也看不出來是什麼，不想在這上面琢磨太多，所以就使用免費的圖示產生器。
想購買或採用免費版自行設計也有線上icon服務可參考
➡ flaticon
順便安利一下，這家flaticon的icon服務系出freepik圖庫，也有簡報模板，無論圖庫/簡報模板/icon都有免費和付費版本，質感都很好！
∣ 延伸閱讀 ∣
➡ 圖庫推薦∣論圖庫購買之必要和分享6個商用圖庫(付費/半免費/完全免費)∣shutterstock /Alamy /yayimages /freepik /xframe/ pexels
➡ 模板推薦∣論購買簡報模板之必要：推薦超強的envato market(Google/Keynote/ PowerPoint)和5個免費/半免費簡報模板網站
favicon.io是受到多數網友好評推薦的線上產生/轉換器，文字/圖檔/表情符號都支援，有設計好的圖案就上傳轉換為ico格式。
我個人選擇用文字製作就好，林人青 LinRenChing，就簡單以L製作。
除了檔案可下載，下方也有link標籤可複製
∣ 購買soledad佈景主題 ∣
∣ 更多WordPress佈景主題 ∣
如何加裝Favicon網站小圖示？
方法有2，一是放在根目錄、一是以link標籤在head塞入程式碼。
對我而言都很複雜，因為先前塞過一些標籤驗證似乎都不成功，新手沒事不想也不敢亂碰這些。
以下文章可參考，WordPress也有外掛可使用。
有簡單解說和方法介紹
不同平台設定方式解說
萬事有外掛
Soledad佈景主題Favicon設定位置
使用Soledad佈景主題的路徑如下：
到WP後台 > 外觀 > 自訂
進入自訂編輯畫面後，
選擇General > General Settings
就會看到Upload Favicon選項，上傳圖片下方可微調圖示形狀，確認之後發布更新即可。
網路上有好心網友提供影片，也可參考
結語
架站之後一直忘記更換圖示，好像就自動抓網站logo的樣子，但logo對於瀏覽器分頁的位置來說，實在有夠模糊，更換之後自己覺得清爽多了(雖然也只是用產生器載一張圖)，變成之後看其他網站也會注意Favicon的部分，覺得這部分設計也算less is more的範例，真是一件重要的小事啊。
不過安裝或是初步操作使用強烈建議要看教學，不然像我一開始搞不清楚子母主題，光安裝就花費很多時間，很推薦 網站帶路姬 的教學！真的是手把手交操作不容易出錯。
➡ WordPress Soledad：如何安裝 Soledad 佈景主題？
∣ 購買soledad佈景主題 ∣
∣ 更多WordPress佈景主題 ∣
∣ 延伸閱讀 ∣ 對架站分享文有興趣的話
∣ 延伸推薦 ∣
我架站是跟著網站帶路姬學習的，零學費超佛心！非常適合新手
學習WordPress架站推薦購入網站帶路姬所著「用WordPress打造賺錢副業」
香港的朋友對網頁設計、WP有興趣可以參考鬍子科技學院~ 🙂
➡ 鬍子科技學院網站
不過還是看個人習慣，想要進階或是多參考，幾個線上課程平台也都有推出類似課程，參考如下
∣ Hahow 好學校 / 網站架設 ∣
∣ YOTTA / 網頁設計課程 ∣ (包含梅干桑的WordPress課程)
∣ 窩課360 / 網頁設計 ∣ (較專業進階)
∣ 六角學院 / 網頁設計 ∣ (較專業進階)
感謝閱覽！若您願意額外點讚鼓勵(至多5讚)，那就真的太圓滿了~ 😉
∣ Google ∣ FB ∣ Twitter ∣ APPLE ID ∣ 皆可登入/註冊
