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