SVG Favicon FTW 你不知道的居然還有這些！
譯文【51CTO.com快譯】我最近一直在做一輔助項目（Style Check和Bedrocss），就像我其他任何長期項目一樣，我已經到了想要添加favicon的地步。
于是，我決定嘗試使用 SVG 圖標，在BOO Safari瀏覽器上是足以支持的，但對于一些需求還不是達到要求。如果在不受支持的瀏覽器上沒有顯示圖標，也是可以接受的。
通過使用 SVG，可以獲得很多的好處，例如：
• 單個文件的清晰圖像質量
• 對表情符號的支持
• 內聯圖標（無需鏈接資源）
• 暗模式檢測
為了了解如何將 SVG 圖標添加到項目中，因此，通過對以下示例（除了表情符號）進行操作，我們將使用一個非常基本的圓形 SVG：
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
- <circle cx="50" cy="50" r="50"/>
- </svg>
將 SVG Favicon 添加到 HTML
將favicon添加到網站的語法同以往操作一樣，同樣適用于 SVG 收藏夾圖標（減去文件擴展名）。
在 HTML 文件的<head>標簽中，放置一個<link>元素，其rel屬性設置為“icon”，href屬性設置為圖標所在的路徑。
- <link rel="icon" href="path/to/favicon.svg"/>
因為我們使用的是 SVG，所以圖標可以是任何你想要的大小，只要確保畫布是方形的。
如果需要搜索免費圖標，icones是一個很好的資源，或者可以使用penpot創建自己的圖標。
將 SVG Favicon 內聯為 Data-URI
在切換到 SVG 收藏夾圖標后，我嘗試做的第一件事是看看是否可以將它們與內聯格式一起使用，而不是鏈接到單獨的文件。
曾經在內聯圖像或背景中使用過 Data-URI 技巧，它的效果非常好，并且，也適用于網站圖標。
不要鏈接到路徑，而是在整個 SVG 代碼前加上data:image/svg+xml;utf8,（包括最后一個逗號）并將整個內容傳遞給href屬性。
- <link rel="icon" href="data:image/svg+xml;utf8,<svg...>...</svg>">
我真的很喜歡這種方法，因為如果忘記將圖標文件放在某個文件夾中的某個位置，我可以將此代碼復制/粘貼到任何項目（我的大多數副項目都使用相同的圖標）。
當然，你可能會覺得這樣使用內聯 SVG 圖標不太好，因為這樣會占用內存，并且在每個頁面上添加內聯 SVG 會增加 HTML 的大小。
如果只有一個網站要處理，這可能不是什么大問題，但對于一個維護多個網站并使用同一個favicon的人來說，是一個不錯的選擇。
使用表情符號表達Favicon
Lea Verou在推特上展示了如何將表情符號添加為Favicon，使用方法特別簡單。
語法的工作原理與之前相同，由于SVG通過<text>元素支持文本內容，并且表情符號幾乎都是文本，因此可以在 SVG 中將放置任何表情符號（可能需要四處移動以適應正確的位置一些移動來適應）。
- <link rel="icon" href="data:image/svg+xml,<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
- <text y=".9em" font-size="90">[place emoji here]</text>
- </svg>" />
這使得創建favicon非常容易，而無需創建自定義favicon。查看Bryson Reece提供的emojicon.dev，可以得到一個表情符號列表，點解其中任何一個，將整個favicon片段復制到剪貼板上。
除此之外，Wes Bos還創建了fav.farm。這是一項第三方服務，將為你生成網站圖標。可以使用你想要的表情符號直接鏈接到他的服務。
- <link rel="icon" href="https://fav.farm/[place emoji here]" />
開發社區的創造力從未停止，在那里有很多很酷、聰明和有創意的開發者。
添加暗模式檢測
我們可以在SVG中添加一個<style>標記，并使用prefers color scheme media查詢根據用戶的暗模式首選項更改圖標。
- <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
- <style>
- svg {
- background: white;
- }
- circle {
- fill: black;
- }
- @media (prefers-color-scheme: dark) {
- svg {
- background: black;
- }
- circle {
- fill: white;
- }
- }
- </style>
- <circle cx="50" cy="50" r="50"/>
- </svg>">
在本例中，我直接針對SVG和<circle>，但你也可以使用類。對于定制SVG，你可能需要這樣做。
SVG中的<style>標記包含在該XML文檔中，因此你不必擔心樣式會泄漏到應用程序的其余部分中。
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
