自製 favicon

favicon 就是會出現在網站名字旁邊的那個小圖示。

最近剛好給自己這個筆記站做了一個醜得突破天際的 favicon，切板時也有用到，就寫一篇記錄一下步驟與我使用的幾個線上網站(這篇是個不會也沒有安裝 photoshop 的廢柴做 icon 的筆記)

1. 畫一個 favicon

我最近做的兩個都是用小畫家，因為我就只是想要不是預設而已。有多醜，可以直接看你現在開啟的這個分頁旁邊那個意義不明的圖案，那就是小畫家畫的XDDD

習慣上儲存成 png 檔。雖然其實用小畫家畫的也沒透明功能。

如果您大大是比較有追求的(並且還跟我一樣沒裝 photoshop 的)朋友，可以參考 Photopea。

2. 去背

因為是小畫家畫的，所以去背也是靠線上工具。
我使用這個: https://www.remove.bg/zh

記得把要去背的地方調成同顏色，我自己是都調黑色。
不過我圖案都很簡單，如果複雜的圖案......
大大還是乖乖用 photoshop吧!!

3. 把圖片轉檔為 ico 檔案

這邊要轉 ico 檔案的原因是因為，我看文章建議的。
不轉也可以，後面引入的 type 調整一下即可。

把輸出文件點開，然後下載到本地即可。

4. 為網站設置 favicon

wordpress的話，選擇「Appearance」的「Editor」。

如果是有裝中文化套件的朋友，是「外觀」的「的「佈景主體編輯器」。

進去之後編輯 header.php 這個 PHP 檔案，在 <head> 與 </hea>> 之間加上一行：

href="/favicon.ico" 就是網站圖示路徑。

以我直接上傳到網站為例的話是
https://carlanote.com/wp-content/uploads/2020/07/favicon.ico

一般網站用法也一樣。

參考文章

卡拉筆記