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