什麼是 favicon？ favicon 是 favorites icon 的縮寫，中文通常稱為頁面圖示（page icon）或網站圖標（website icon）；簡單一點來說，就是瀏覽器最上面各分頁會出現的圖案。 像我這個網站的favicon 是位可愛的吸血鬼 favicon 除了可以用傳統的 ico 檔，也可以用 png 檔，甚至可以用 SVG 檔。 為何要特地用 SVG 檔？ 用一般圖檔就好了，何必要再創作一個 SVG 檔呢？因為 瀏覽器有 dark mode 的存在 ，這個模式可能會讓網頁的 favicon 看不清楚，這就是我推薦使用 SVG 檔的原因，因為我們可以很輕易地在 SVG 檔中塞 CSS 語法進去調色，別的檔案格式沒有這種能力。 看到一看就知道沒去背的白底 icon 會讓我很焦慮， 以下為簡單的例子： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <style> path{fill:#2858aa;} @media (prefers-color-scheme: dark) {path{fill: #23A6DE;}} </style> <path d="example"/> </svg> 「 prefers-color-scheme : dark」就是在 dark mode 下呈現的樣貌，寫法跟 media query 一樣。我們可以在括號範圍內設定一個比較亮的顏色（fill: #23A6DE）才不會讓使用者看不清楚。 favicon HTML 設定 在 HTML 的 head 標籤裡照這樣設...