Formito 免費網站圖示 Favicon 產生器，以文字或表情符號線上製作圖案

如果有開發或經營網站的經驗，一定知道網站圖示（Favicon）是相當重要的一個環節，這個圖案除了顯示於書籤列表，在開啟網頁時也會出現在瀏覽器分頁標籤左側，對於識別網站來說有一定程度效果，特別是很多人習慣同時打開許多分頁，在這種情況下圖示就成為快速切換特定分頁的方式。一開始就建議選擇具有代表性、容易被記住的圖案或顏色，通常會以 LOGO 或是字母搭配特定顏色加強記憶。

本文要介紹的「Free Favicon Maker」是 Formito 提供的免費網站圖示產生器，可以協助使用者線上製作簡單、好看且易於識別的網站圖示，這項功能主要分為兩部分：以字母或表情符號 Emoji 製作圖示，文字字型則是使用 Google Fonts 雲端字型技術，所有在 Google Fonts 看到的字型皆可用來產生網站圖示，並對文字大小、字重、邊框形狀和背景顏色進行調整自訂。

早期網站圖示大多使用 PNG 或 ICO 格式，現今更傾向使用 SVG 向量圖，Free Favicon Maker 在製作後產生 SVG 或 PNG 兩種格式，也會提供原始碼讓使用者快速複製到網站，非常方便，對於網站還沒有使用 Favicon 來說是個非常實用的製作工具。

Free Favicon Maker
https://formito.com/tools/favicon

使用教學

STEP 1

開啟 Free Favicon Maker 預設情況下是使用文字（Letter）製作 Favicon，可以將下方的「F」改為其他字元，也支援中文，下方可以選擇不同的字型和文字大小。

點選「Emoji」可切換為表情圖案模式，以搜尋方式選擇表情圖案，也能調整圖示尺寸大小、形狀和背景顏色。

STEP 2

在設定字元時，可透過下方的「Font」選項選擇要使用的文字字型，字型來自 Google Fonts，點選上方「All Fonts」開啟 Google Fonts 找到你需要的字型名稱，填入 Font 欄位就能套用這個字型，非常簡單。

STEP 3

在字型下方還有調整文字大小、字重和顏色選項，透過背景功能可以選擇要產生的 Favicon 形狀、顏色等選項，設定後即時更新，從右側預覽看看是不是自己需要的網站圖案。

STEP 4

最後，從下方「Get HTML Code」取得相關程式碼，將它複製、貼到網站的 標籤就能套用這個 Favicon 網站圖案，或者你也可以下載 SVG 或 PNG 圖片格式，使用第二段程式碼將圖片帶入網站使用，如果是使用這個方法必須手動上傳圖片檔案。