SVG，Favicons以及我們可以與他們一起做的所有有趣的事情

網站圖標（Favicons）是瀏覽器標籤頁中顯示的小圖標，方便用戶在眾多書籤和標籤頁中快速識別網站。它們是互聯網歷史中一個巧妙的設計，並且具備一些令人驚嘆的功能。

一項新功能是使用SVG作為網站圖標。大多數現代瀏覽器都支持此功能，並且支持度還在不斷提高。

以下是將網站圖標添加到網站的代碼。將其放置在網站的部分：

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

並將以下代碼添加到網站的Web應用程序清單中：

 {
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

支持SVG網站圖標的瀏覽器將覆蓋第一個<link>元素聲明，並使用第二個<link>元素。不支持SVG網站圖標但支持Web應用程序清單的瀏覽器將使用更高分辨率的圖像。所有其他瀏覽器將回退到使用favicon.ico文件。這確保了所有支持網站圖標的瀏覽器都能獲得良好的體驗。

您可能還會注意到第二行中rel聲明的備用屬性值。這以編程方式向瀏覽器傳達使用.ico文件格式的網站圖標作為備用顯示。

在網站圖標之後是一行代碼，它加載另一個SVG圖像，名為safari-pinned-tab.svg 。這是為了支持Safari的固定標籤功能，該功能在其他瀏覽器支持SVG網站圖標之前就已經存在。您還可以在此處添加其他文件以增強不同應用程序和服務的網站，稍後將對此進行詳細介紹。

以下是SVG網站圖標當前支持級別的更多詳細信息：

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持該功能。

桌面端

移動端/平板電腦

為什麼選擇SVG？

您可能想知道為什麼需要SVG。 .ico文件格式已經存在很長時間了，並且可以支持最大尺寸為256×256像素的圖像。這裡有三個答案：

易於創作

創建.ico文件很麻煩。該文件是Microsoft使用的專有格式，這意味著您需要專門的工具來創建它們。 SVG是一個開放標準，這意味著您可以無需任何其他工具或平台鎖定即可使用它們。

未來發展

視網膜屏？ 5K？ 6K？當我們使用與分辨率無關的SVG文件作為網站圖標時，我們可以保證我們的網站圖標在未來的設備上看起來清晰銳利，無論其顯示屏有多大。

性能

SVG通常是非常小的文件，特別是與它們的柵格圖像對應物相比——如果您事先對其進行優化，則更是如此。通過僅使用16×16像素的網站圖標作為不支持SVG瀏覽器的後備方案，我們提供了一種兼具高支持度和較小文件大小的組合。

這似乎有點極端，但在網絡性能方面，每個字節都很重要！

技巧

SVG的另一個優點是我們可以直接在其內嵌入CSS。這意味著我們可以使用JavaScript動態調整它們，前提是SVG是內聯聲明的，而不是使用<img alt="SVG，Favicons以及我們可以與他們一起做的所有有趣的事情" >元素嵌入的。

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

由於SVG網站圖標是使用<link>元素嵌入的，因此無法使用JavaScript修改它們。但是，我們可以使用表情符號和媒體查詢。

表情符號

Lea Verou有一個天才的想法，即在SVG的<text></text>元素內使用表情符號來創建一個具有透明背景的快速網站圖標，該圖標在小尺寸下也能保持清晰。

作為回應，Chris Coyier製作了一個簡潔的小型演示，讓您可以試用這個概念。

深色模式支持

Thomas Steiner和Mathias Bynens都獨立地發現了可以使用prefers-color-scheme媒體查詢來提供深色模式支持的想法。這項工作是基於Jake Archibald對SVG和媒體查詢的探索。

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"></path>
</svg>

對於支持的瀏覽器，此代碼意味著我們的星形SVG網站圖標將在激活深色模式時將其填充顏色從黑色更改為白色。非常巧妙！

其他媒體查詢

深色模式支持讓我想到：如果SVG可以支持prefers-color-scheme ，我們還能用它們做什麼？雖然對5級媒體查詢的支持可能還不存在，但這裡有一些可以考慮的想法：

• 使用light-level在低光環境下使網站圖標顏色去飽和。
• 使用inverted-colors “翻轉”反轉顏色以保留品牌，或確保照片般逼真的網站圖標按預期顯示。
• 使用prefers-reduced-motion刪除網站圖標動畫。理想情況下，我們應該避免首先為網站圖標設置動畫，因為它們可能是注意力缺陷多動障礙和其他相關殘疾的誘因。
• 使用forced-colors和/或Windows高對比度模式媒體查詢來確保網站圖標在高對比度顏色環境中保持視覺效果！請記住使用顏色關鍵字以保持網站圖標的顏色動態！

保持清晰

良好網站圖標設計的另一個重要方面是確保它們在小型瀏覽器標籤區域中看起來不錯。其中的秘訣是使矢量圖像的路徑與像素網格對齊，這是計算機用來將SVG數學轉換為我們在屏幕上看到的位圖的指南。

這是一個使用正方形形狀的簡化示例：

當正方形的矢量點與畫板的像素網格對齊時，計算機用來平滑形狀的抗鋸齒效果是不需要的。當矢量點未對齊時，我們會得到“塗抹”效果：

可以使用Figma、Sketch、Inkscape或Illustrator等矢量編輯程序調整像素網格上的矢量點位置。這些程序也導出SVG。要調整矢量點的位置，請使用精確選擇工具選擇每個節點並將其拖動到所需位置。

為了在如此小的尺寸下看起來不錯，一些更複雜的圖標可能需要簡化。如果您正在尋找這方面的良好入門指南，Jeremy Frank在Vidget上撰寫了一篇非常好的兩部分文章。

邁出額外一步

除了網站圖標外，還有許多不同的（不幸的是專有的）方法可以使用圖標來增強其體驗。這些包括前面提到的Safari的固定標籤圖標¹、聊天應用程序展開、固定的Windows開始菜單磁貼、社交媒體預覽和主屏幕啟動器。

如果您正在尋找開始使用這些增強功能的好地方，我非常喜歡realfavicongenerator.net。

關於網站圖標歷史的一個有趣的事情：Internet Explorer是第一個支持它們的瀏覽器，它們是由一位名叫Bharat Shyam的開發人員在最後一刻偷偷添加進去的：

故事是這樣的，深夜，Shyam正在開發他的新網站圖標功能。他叫來了初級項目經理Ray Sun來看一看。

Shyam評論道：“這很好，對吧？簽入吧？”，請求允許將代碼簽入Internet Explorer代碼庫，以便它可以在下一個版本中發布。 Sun沒有多想，這個功能很酷，顯然會讓IE更有優勢。所以他告訴Shyam繼續添加它。就這樣，網站圖標進入了Internet Explorer 5，它將成為網絡有史以來最大的瀏覽器版本之一。

第二天，Sun因讓這個功能如此迅速地通過而受到經理的斥責。事實證明，Shyam特意等到當天晚些時候，他知道一個經驗不足的項目經理會讓他通過。但到那時，代碼已經被合併了。順便說一句，你會驚訝於有多少相對主要的瀏覽器功能像這樣偷偷地進入版本中。

摘自Jay Hoffmann撰寫的《我們如何獲得網站圖標》

我很高興看到該平台對網站圖標給予了一些關注。它們長期以來一直是我最喜歡的微小設計細節之一，我很高興它們變得對用戶的需求更具響應性。如果您有時間，為什麼不以Bharat Shyam在1999年所做的那樣，將SVG網站圖標偷偷添加到您的項目中呢？

¹ 我無法確定Safari是否會實現SVG網站圖標支持，但我希望他們這樣做。有人聽說過什麼嗎？

以上是SVG，Favicons以及我們可以與他們一起做的所有有趣的事情的詳細內容。更多資訊請關注PHP中文網其他相關文章！