跳脫進度，想先做網站 Favicon 的設計 （其實是因為 Menu 需要清楚一點的頭腦來做分層設計，今天不適合XD)，需要些療癒的視覺衝擊效果
今天主要是紀錄製作 Favicon 與更新到網站的過程
大家好，我是 Jade Chang
Statistic Information 畢業，入職場後於外商從事軟體技術行銷，長期規劃各種線上線下活動像是直播節目/帶狀線上教學，後期負責學生實習計畫與大專院校 Talent Cultivation 與技術社群行銷 Program 為主，過去一年轉任於台灣本土軟體開發商 PM，周旋於客戶、工程師與設計師之間並短期投身新創事業，近期轉換於新竹半導體產業，還在體驗適應中。
Favicon 是什麼呢？第一次聽到的時候是我在擔任軟體開發商 PM 的時候，設計師說請客戶提供，想當時真的是聽得一愣一愣，當時參加鐵人賽寫【第 27 個第一次】 抓住每個企業識別展示的機會 ! 快速導覽網站瀏覽時視覺上需要準備的基本資訊，誰知道一年後接觸了，這次不是跟客戶要！是自己上傳！
Favicon 是 Favorites Icon 的縮寫，很多人會直接說分頁上的小 Logo 或是網頁顯示圖案，只要有使用瀏覽器開網頁的朋友都一定會看到 Favicon，用鐵人賽舉例，Favicon 就是下圖中的那個幫，如果沒有設定的話用 mac 開 chrome 來難就會帶入預設的灰色地球，分頁一多的話就會看不到網站名稱，如果沒有 Favicon 使用者可能會少一點印象唷
Favicon 的上傳可以強化網站，看看下圖瀏覽器首頁上的各個 Favicon，是不是只要看圖案就知道他是哪個知名網站呢
這次是參考叫做 Canva的網站，他是一個線上製作圖片很強大與好玩的網站，追求化繁為簡與助人一臂之力，在我使用完畢後，真的覺得被幫助了一大把！
當入網站註冊後，首頁上即可看見網站提供很多品項的設計，由於是 Favicon 的設計，我就點選 LOGO
進來後可以看到左手邊是功能列表，再來就是眾多的模板甚至可以搜尋想要的模板 （dog, tree, heart...) 自己下關鍵字，模板非常豐富，真的是非設計師的一大福音！各種形狀的都有提供，建議的顏色與字體搭配都有配套好一組一組的，點選後就可以看到畫布上已經帶入選擇的模板，他每一個都是分開的元件，可以直接修改文字與擺放位置
也可以自行上傳圖片以及他有提供很像 IG 發限時動態時可以有很多小插圖與 GIF，Canva 都有提供唷，讓製作 Logo 跟發文一樣上手
因為我是架設個人網站，並沒有相關品牌的 Logo，品牌就是我自己，所以圖案的選擇上就用虛擬替身來代表！本來圖案上還有放一個簽名，但是後來發現 Favicon 顯示的圖案其實很小，因此就先把名字拿掉了，但是網頁上的 Logo 為求一致性仍會 Avatar + name ，可能選個框框來製作
蠻推薦有時間可以玩玩，還有 Presentation 的製作感覺也很實用！
當然將 Favicon 製作完成後要把他更新到 jade.blog 上囉，先進到 WordPress 的後台，找到 Appearance > Customize (沒錯，我們就是要客製化自己的 Favicon) > General > General settings > upload favicon位置是藏得有點深 (汗..?)，用下圖紀錄比較清楚..
上傳後記得 Publish + 重整網頁就可以看到 Favicon 已經更新到jadechang.blog 上囉！
鐵人賽文章會 Delay 1-2 天同步放在 Medium
歡迎訂閱或是透過 Facebook 一起來交流 (求指導）
iThome鐵人賽
看影片追技術