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

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

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

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

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

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

使用教學

STEP 1

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

Free Favicon Maker

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

Free Favicon Maker

STEP 2

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

Free Favicon Maker

STEP 3

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

Free Favicon Maker

STEP 4

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

Free Favicon Maker

值得一試的三個理由:

  1. Free Favicon Maker 提供使用者線上製作網站圖示 Favicon
  2. 以字母或表情符號製作圖示,採用 Google Fonts 雲端字型技術
  3. 產生 SVG 或 PNG 格式,將程式碼複製貼上網站快速套用
分享到...