有声读物,小说排行榜,武道至尊帝临小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

SVGFaviconFTW你不知道的居然還有這些！

我最近一直在做一輔助項目（Style Check和Bedrocss），就像我其他任何長期項目一樣，我已經到了想要添加favicon的地步。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供東遼網(wǎng)站建設、東遼做網(wǎng)站、東遼網(wǎng)站設計、東遼網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、東遼企業(yè)網(wǎng)站模板建站服務，10多年東遼做網(wǎng)站經驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

于是，我決定嘗試使用 SVG 圖標，在BOO Safari瀏覽器上是足以支持的，但對于一些需求還不是達到要求。如果在不受支持的瀏覽器上沒有顯示圖標，也是可以接受的。

通過使用 SVG，可以獲得很多的好處，例如：

? 單個文件的清晰圖像質量

? 對表情符號的支持

? 內聯(lián)圖標（無需鏈接資源）

? 暗模式檢測

為了了解如何將 SVG 圖標添加到項目中，因此，通過對以下示例（除了表情符號）進行操作，我們將使用一個非?；镜膱A形 SVG：

將 SVG Favicon 添加到 HTML

將favicon添加到網(wǎng)站的語法同以往操作一樣，同樣適用于 SVG 收藏夾圖標（減去文件擴展名）。

在 HTML 文件的標簽中，放置一個元素，其rel屬性設置為“icon”，href屬性設置為圖標所在的路徑。

因為我們使用的是 SVG，所以圖標可以是任何你想要的大小，只要確保畫布是方形的。

如果需要搜索免費圖標，icones是一個很好的資源，或者可以使用penpot創(chuàng)建自己的圖標。

將 SVG Favicon 內聯(lián)為 Data-URI

在切換到 SVG 收藏夾圖標后，我嘗試做的第一件事是看看是否可以將它們與內聯(lián)格式一起使用，而不是鏈接到單獨的文件。

曾經在內聯(lián)圖像或背景中使用過 Data-URI 技巧，它的效果非常好，并且，也適用于網(wǎng)站圖標。

不要鏈接到路徑，而是在整個 SVG 代碼前加上data:image/svg+xml;utf8,（包括最后一個逗號）并將整個內容傳遞給href屬性。

 
 
 
 
  
  
  
  ...">

我真的很喜歡這種方法，因為如果忘記將圖標文件放在某個文件夾中的某個位置，我可以將此代碼復制/粘貼到任何項目（我的大多數(shù)副項目都使用相同的圖標）。

當然，你可能會覺得這樣使用內聯(lián) SVG 圖標不太好，因為這樣會占用內存，并且在每個頁面上添加內聯(lián) SVG 會增加 HTML 的大小。

如果只有一個網(wǎng)站要處理，這可能不是什么大問題，但對于一個維護多個網(wǎng)站并使用同一個favicon的人來說，是一個不錯的選擇。

使用表情符號表達Favicon

Lea Verou在推特上展示了如何將表情符號添加為Favicon，使用方法特別簡單。

語法的工作原理與之前相同，由于SVG通過元素支持文本內容，并且表情符號幾乎都是文本，因此可以在 SVG 中將放置任何表情符號（可能需要四處移動以適應正確的位置一些移動來適應）。

 
 
 
 
  
  
  
   
  
  
  
  [place emoji here] 
  
  
  
  " />

這使得創(chuàng)建favicon非常容易，而無需創(chuàng)建自定義favicon。查看Bryson Reece提供的emojicon.dev，可以得到一個表情符號列表，點解其中任何一個，將整個favicon片段復制到剪貼板上。

除此之外，Wes Bos還創(chuàng)建了fav.farm。這是一項第三方服務，將為你生成網(wǎng)站圖標。可以使用你想要的表情符號直接鏈接到他的服務。

開發(fā)社區(qū)的創(chuàng)造力從未停止，在那里有很多很酷、聰明和有創(chuàng)意的開發(fā)者。

添加暗模式檢測

我們可以在SVG中添加一個

在本例中，我直接針對SVG和，但你也可以使用類。對于定制SVG，你可能需要這樣做。

SVG中的