Favicon.io 最強大的網站圖示產生器，可線上文字製作或以圖片轉換

前段時間在研究網站圖示（Favicon）如何正確運作，對有在經營網站的站長來說一定知道在網站加入識別圖案的重要性，一般來說，加入網站圖示的作法並不困難，甚至很多網站會說只要一段原始碼就能做到，但現在因為有行動裝置作業系統，也要考量到網站被新增到桌面時會用到不同圖示尺寸，因此就必須額外準備各種不同尺寸大小的網站圖示。

本文要介紹的「Favicon.io」是一個協助站長製作網站圖示（Favicon）的線上產生器，主要有三種功能，以文字、圖片或表情符號製作網站圖示，然後產生各種圖片大小尺寸，以及一個必要的 favicon.ico 檔案，只要將相關檔案上傳到網站伺服器，依照 Favicon.io 提供的原始碼範例稍作修改就能為網站加入圖示，和之前介紹的 Favic-o-Matic 差不多。

如果網站還沒有適合的圖案，Favicon.io 支援直接以文字產生網站圖示，只要設定要顯示的文字、字型、邊框、文字大小然後設定顏色及背景顏色即可。

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

為了獲得最好的相容性，瀏覽器透過 favicon.ico 檔案在不同位置顯示不同尺寸圖片，例如書籤列、網址列、瀏覽器標籤或桌面捷徑等等，若你覺得當前使用者的網站圖示不夠精確或想要更新一下，Favicon.io 是個很好用的工具。

Favicon.io
https://favicon.io/

使用教學

STEP 1

開啟 Favicon.io 網站會看到三個主要功能，從文字轉 ICO、從 PNG（或其他圖片格式）轉 ICO 或是從表情符號轉 ICO ，選擇後能進入產生器。

STEP 2

以文字字母製作成網站圖示也是一個蠻常見的作法，透過 Favicon.io 使用者就無需以繪圖軟體製作，從網頁就能輸入要顯示的文字、邊框、文字字型和大小，這裡的字型很多（應該是直接從 Google Fonts 載入），可以設計出許多好看的風格，最後選擇一下文字和背景顏色就能在左上角預覽效果。

另一種是將你現有的圖片轉為網站圖示，這可能是大部分人會選擇的方式，例如免費資源網路社群已經有個 Logo 設計，透過 Favicon.io 將圖片拖曳進去後就會轉為幾種常見的網站圖示大小，再加入適當語法後就能在網站上使用這些圖案。

產生後點選右上角的「Download」就能將所有圖案打包下載。

STEP 3

下載後解壓縮會獲得一些檔案，包括：

• 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 下方說明，將這些檔案上傳到你的網站伺服器根目錄，接著將下方的原始碼複製、貼上於你的 HTML 網頁檔案的 head 標籤即可。

STEP 4

另一個有趣的功能是如果你網站沒有現有圖案、也不想要使用文字製作的網站圖示，還有另一種圖片來源就是表情符號（Emoji），進入後選擇你要使用的圖案，就會幫你製作成各種尺寸大小的網站圖示。

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