前段時間在研究網(wǎng)站圖標(biāo)（Favicon）如何正確運(yùn)作，一般來說，加入網(wǎng)站圖標(biāo)的做法并不困難，甚至很多網(wǎng)站會說只要一段源碼就能做到，但現(xiàn)在因為有移動設(shè)備，也要考量到網(wǎng)站被新增到桌面時會用到不同圖標(biāo)尺寸，因此就必須額外準(zhǔn)備各種不同尺寸大小的網(wǎng)站圖標(biāo)。

本文要介紹的「Favicon.io」是一個協(xié)助站長制作網(wǎng)站圖標(biāo)（Favicon）的線上生成器，主要有三種功能，以文字、圖片或表情符號制作網(wǎng)站圖標(biāo)，然后產(chǎn)生各種圖片大小尺寸，以及一個必要的 favicon.ico 文檔，只要將相關(guān)文檔上傳到網(wǎng)站服務(wù)器根目錄，依照 Favicon.io 提供的源碼范例稍作修改就能為網(wǎng)站加入圖標(biāo)，和之前介紹的 Favic-o-Matic 差不多。

如果網(wǎng)站還沒有適合的圖案，F(xiàn)avicon.io 支持直接以文字產(chǎn)生網(wǎng)站圖標(biāo)，只要設(shè)定要顯示的文字、字型、邊框、文字大小然后設(shè)定顏色及背景顏色即可。

對于已經(jīng)有 Logo 的網(wǎng)站，F(xiàn)avicon.io 可以將現(xiàn)有的圖案轉(zhuǎn)為各種尺寸，支持 JPG、PNG 和 BMP 格式，亦可轉(zhuǎn)換為 favicon.ico。這個文檔比較特別，也是瀏覽器會使用的特殊圖片格式，在單一文檔加入多層次圖案，每一層圖案都能有不同大小，常見尺寸包括 16x16px、32x32px 和 48x48px。

為了獲得最好的兼容性，瀏覽器通過 favicon.ico 文檔在不同位置顯示不同尺寸圖片，例如書簽列、網(wǎng)址列、瀏覽器標(biāo)簽或桌面捷徑等等，若你覺得當(dāng)前使用者的網(wǎng)站圖標(biāo)不夠精確或想要更新一下，F(xiàn)avicon.io 是個很好用的工具。

Favicon.io

網(wǎng)站鏈接：https://favicon.io/

使用教學(xué)

開啟 Favicon.io 網(wǎng)站會看到三個主要功能，從文字轉(zhuǎn) ICO、從 PNG（或其他圖片格式）轉(zhuǎn) ICO 或是從表情符號轉(zhuǎn) ICO ，選擇后能進(jìn)入生成。

以文字字母制作成網(wǎng)站圖標(biāo)也是一個常見的做法，通過 Favicon.io 使用者就無需以繪圖軟件制作，從網(wǎng)頁就能輸入要顯示的文字、邊框、文字字型和大小，這里的字型很多（應(yīng)該是直接從 Google Fonts 載入），可以設(shè)計出許多好看的風(fēng)格，最后選擇一下文字和背景顏色就能在左上角預(yù)覽效果。

另一種是將你現(xiàn)有的圖片轉(zhuǎn)為網(wǎng)站圖標(biāo)，這可能是大部分人會選擇的方式，生成后點選右上角的「Download」就能將所有圖標(biāo)打包下載。

下載后解壓縮會獲得一些文檔，包括：

• android-chrome-192×192.png

• android-chrome-512×512.png

• apple-touch-icon.png

• favicon-16×16.png

• favicon-32×32.png

• favicon.ico

• site.webmanifest

依照 Favicon.io下方說明，將這些文檔上傳到你的網(wǎng)站服務(wù)器根目錄，接著將下方的源碼復(fù)制、貼上你的 HTML 網(wǎng)頁文檔的 head 標(biāo)簽即可。

另一個有趣的功能是如果你網(wǎng)站沒有現(xiàn)有圖案、也不想要使用文字制作的網(wǎng)站圖標(biāo)，還有另一種圖片來源就是表情符號（Emoji），進(jìn)入后選擇你要使用的圖案，就會幫你制作成各種尺寸大小的網(wǎng)站圖標(biāo)。

一樣可從線上預(yù)覽，查看不同尺寸的顯示效果，點選「Download」取得各種格式圖片。

值得一試的三個理由：

•  線上產(chǎn)生網(wǎng)站圖標(biāo) Favicon，可從文字制作或以現(xiàn)有圖片轉(zhuǎn)換

• 可制作出常見尺寸、適用于移動設(shè)備的圖片文檔

• 解壓縮將圖片上傳服務(wù)器根目錄，復(fù)制網(wǎng)站的源碼范例即可載入