打造自動調整網站小圖示

建構自動調整網站小圖示的基礎總覽。

Adam Argyle

在這篇文章中，我想分享一些想法，說明如何運用 SVG。歡迎查看示範內容。

畫面上的瀏覽器分頁已配合 MacOS 系統的淺色和深色主題變更顯示。 立即試用

如果您喜歡看影片，請參考這篇文章的 YouTube 版本：

總覽

自訂網站小圖示是 是改進網路專案的絕佳方式這些內容會顯示在電腦版瀏覽器分頁上 也可以在「儲存以供日後使用」內讀者、其他連結到你網站的網誌文章 內容。傳統上是以 .ico 檔案類型執行此操作，但最近才使用 瀏覽器可以使用 SVG 是向量格式。使用 漸進式 強化功能 提供完整支援的 .ico 網站小圖示；如果可以，請升級至 .svg 廣告。

SVG 能在沒有限制的情況下 品質下降 而且大小可能非常小 嵌入 CSS，甚至是嵌入式媒體查詢。也就是說，如果使用 SVG 網站小圖示 而是在閱讀器應用程式或書籤列中， 相關 (淺色或深色) 圖示的原因是 SVG。隨後 SVG 將運用嵌入式樣式，針對淺色和深色使用者進行調整 偏好設定。

大型且易於辨別的淺色網站小圖示範例。

在每個瀏覽器中 自動調整圖示從上到下簡介： Safari、Firefox、Chrome。
在每個瀏覽器中 自動調整圖示從上到下簡介： Safari、Firefox、Chrome。

標記

SVG 標記為 XML，使用 .svg 檔案類型副檔名，可存放更多動態類型的 再也不是件繁重乏味的工作

先製作「favicon.svg」

建立名為 favicon.svg 的新檔案，並新增以下內容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>
敬上

以下是我的 SVG 檔案，我已將 viewBox 調整成與圖片相關的大小：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

新增形狀和路徑

接著，新增 SVG 路徑程式碼。這通常是指在程式碼編輯器中開啟 SVG，但 通常不容易理解這個這份指南 包括將可擴充向量圖形 (SVG) 格式匯出及最佳化 設計工具

這個 GUI 挑戰的圖片出爐 。 Illustrator。我非常 而且效能最佳。我是透過 SVGOMG 執行 然後親手剪裁這些草莓

以下是清潔後的 skull 藝術品路徑組範例 它：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <g id="skull">
    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
  </g>
</svg>

請注意，使用者可理解的 ID 選取器，例如： #eyes-and-nose和 喜歡的課程 .favicon-stroke。這些是我為了進行 CSS 準備工作而手動編輯。 可擴充向量圖形不會成為自動調整網站小圖示，不一定要新增類別和 ID。

在 HTML 的 <head> 標記中，於 .ico 網站小圖示後方加上以下內容：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

新圖示看起來可能與 .ico 版本相同，因此會確認圖示是否 開啟開發人員工具的「Network」面板。依圖片篩選及搜尋 網站小圖示：

開發人員工具中的「Network」窗格螢幕截圖，其中含有「Search」的篩選條件 醒目顯示「網站小圖示」和「favicon.svg」資源

樣式

和 HTML 一樣，您也可以在標記中加入 <style> 標記，以便針對該標記 文件範圍：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

我的網站小圖示 SVG 會預設使用淺色主題顏色。 我撰寫的樣式主要是筆觸和填滿顏色：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    .favicon-stroke {
      stroke-width: 8px;
      stroke: #8929ff;
    }
    #skull-outline { fill: white }
    #eyes-and-nose, #hat-outline { fill: #8929ff }
    #hat-fill, #hat-bill { fill: #e662e6 }
  </style>
  …
</svg>

淺色主題網站小圖示預覽範例。

接下來是最有趣的部分，設定網站小圖示的深色主題版本樣式。 會填入樣式標記中的媒體查詢：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  …
</svg>

開發人員工具的螢幕截圖，顯示深色主題媒體查詢覆寫了 為 SVG 的眼睛和鼻子填滿顏色。

礦業最終的成就如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      .favicon-stroke { stroke: #343a40 }
      #skull-outline { fill: #adb5bd }
      #hat-outline { fill: #343a40 }
      #eyes-and-nose { fill: #343a40 }
    }
  </style>
  …
</svg>

深色主題網站小圖示預覽範例。

我選擇將亮紫色的框線替換為良好的深灰色 (#343a40)， 將骷髏頭顏色從白色變更為冷灰色 (#adb5bd)，但 離開粉紅色強調的帽子。

並排預覽淺色和深色網站小圖示。

結論

現在你知道我怎麼了，這樣會如何 🙂?

讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。 建立示範、將 Twitter 推文連結，我們就會為您新增 前往下方的社群重混專區！

社群重混作品