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

一項(xiàng)新功能是使用SVG作為網(wǎng)站圖標(biāo)。大多數(shù)現(xiàn)代瀏覽器都支持此功能，並且支持度還在不斷提高。

以下是將網(wǎng)站圖標(biāo)添加到網(wǎng)站的代碼。將其放置在網(wǎng)站的部分：

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

並將以下代碼添加到網(wǎng)站的Web應(yīng)用程序清單中：

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

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

您可能還會注意到第二行中rel聲明的備用屬性值。這以編程方式向?yàn)g覽器傳達(dá)使用.ico文件格式的網(wǎng)站圖標(biāo)作為備用顯示。

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

以下是SVG網(wǎng)站圖標(biāo)當(dāng)前支持級別的更多詳細(xì)信息：

此瀏覽器支持?jǐn)?shù)據(jù)來自Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持該功能。

桌面端

移動端/平板電腦

為什麼選擇SVG？

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

易於創(chuàng)作

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

未來發(fā)展

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

性能

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

這似乎有點(diǎn)極端，但在網(wǎng)絡(luò)性能方面，每個字節(jié)都很重要！

技巧

SVG的另一個優(yōu)點(diǎn)是我們可以直接在其內(nèi)嵌入CSS。這意味著我們可以使用JavaScript動態(tài)調(diào)整它們，前提是SVG是內(nèi)聯(lián)聲明的，而不是使用<img alt="SVG，F(xiàn)avicons以及我們可以與他們一起做的所有有趣的事情" >元素嵌入的。

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

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

表情符號

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

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

深色模式支持

Thomas Steiner和Mathias Bynens都獨(dú)立地發(fā)現(xiàn)了可以使用prefers-color-scheme媒體查詢來提供深色模式支持的想法。這項(xiàng)工作是基於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網(wǎng)站圖標(biāo)將在激活深色模式時將其填充顏色從黑色更改為白色。非常巧妙！

其他媒體查詢

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

• 使用light-level在低光環(huán)境下使網(wǎng)站圖標(biāo)顏色去飽和。
• 使用inverted-colors “翻轉(zhuǎn)”反轉(zhuǎn)顏色以保留品牌，或確保照片般逼真的網(wǎng)站圖標(biāo)按預(yù)期顯示。
• 使用prefers-reduced-motion刪除網(wǎng)站圖標(biāo)動畫。理想情況下，我們應(yīng)該避免首先為網(wǎng)站圖標(biāo)設(shè)置動畫，因?yàn)樗鼈兛赡苁亲⒁饬θ毕荻鄤诱系K和其他相關(guān)殘疾的誘因。
• 使用forced-colors和/或Windows高對比度模式媒體查詢來確保網(wǎng)站圖標(biāo)在高對比度顏色環(huán)境中保持視覺效果！請記住使用顏色關(guān)鍵字以保持網(wǎng)站圖標(biāo)的顏色動態(tài)！

保持清晰

良好網(wǎng)站圖標(biāo)設(shè)計的另一個重要方面是確保它們在小型瀏覽器標(biāo)籤區(qū)域中看起來不錯。其中的秘訣是使矢量圖像的路徑與像素網(wǎng)格對齊，這是計算機(jī)用來將SVG數(shù)學(xué)轉(zhuǎn)換為我們在屏幕上看到的位圖的指南。

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

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

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

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

邁出額外一步

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

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

關(guān)於網(wǎng)站圖標(biāo)歷史的一個有趣的事情：Internet Explorer是第一個支持它們的瀏覽器，它們是由一位名叫Bharat Shyam的開發(fā)人員在最後一刻偷偷添加進(jìn)去的：

故事是這樣的，深夜，Shyam正在開發(fā)他的新網(wǎng)站圖標(biāo)功能。他叫來了初級項(xiàng)目經(jīng)理Ray Sun來看一看。

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

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

摘自Jay Hoffmann撰寫的《我們?nèi)绾潍@得網(wǎng)站圖標(biāo)》

我很高興看到該平臺對網(wǎng)站圖標(biāo)給予了一些關(guān)注。它們長期以來一直是我最喜歡的微小設(shè)計細(xì)節(jié)之一，我很高興它們變得對用戶的需求更具響應(yīng)性。如果您有時間，為什麼不以Bharat Shyam在1999年所做的那樣，將SVG網(wǎng)站圖標(biāo)偷偷添加到您的項(xiàng)目中呢？

1 我無法確定Safari是否會實(shí)現(xiàn)SVG網(wǎng)站圖標(biāo)支持，但我希望他們這樣做。有人聽說過什麼嗎？

以上是SVG，F(xiàn)avicons以及我們可以與他們一起做的所有有趣的事情的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！