【2024最新】12 個線上 Favicon 產生器,免費網站圖示製作工具

精選 Favicon 產生器
重點摘要

Favicon 產生器推薦

如何製作 Favicon 圖示

  1. 選擇一個 Favicon 產生器
  2. 選擇製作 Favicon 的圖片
  3. 預覽完成的 Favicon 圖示
  4. 下載完成的 Favicon 圖示
  5. 將 Favicon 檔案上傳到網站
  6. 網站中加入 Favicon 程式碼
  7. 儲存查看你的 Favicon 圖示

Favicon 是什麼

關於是什麼的解釋

Favicon 是 Favorites icon 的縮寫,也常被稱為網站圖示、頁面圖示。簡單來說 Favicon 就是一個與網站有關聯的圖示。

當你在用瀏覽器上網時,標籤頁上通常都會有一個小小的圖示,例如臉書的藍色 F 商標,這些圖示就是 Favicon。

Favicon 是網站的重要組成部分,可以幫助使用者快速識別不同的網站,並且更容易在書籤裡找到自己收藏的內容。

Favicon 產生器推薦

  • iFreesite Favicon 圖示產生器
  • Real Favicon Generator
  • Favicon & App Icon Generator
  • Favicon Generator
  • Favicon.ico Generator
  • SoftIcons Favicon Generator
  • IONOS The Favicon Generator
  • Formito Free Favicon Maker
  • RedKetchup Favicon Generator
  • ConvertICO
  • Favicon.io
  • FavICO

iFreesite Favicon 圖示產生器

iFreesite Favicon 圖示產生器

iFreesite Favicon 圖示產生器是由 iFreesite 網站所提供的免費線上工具,可以幫助你快速製作網站的 Favicon 圖示。

開啟網站後,只要點擊「選擇檔案」按鈕來上傳想要轉換成 Favicon 的圖片,再選擇 Favicon 圖示的尺寸。

最後,按下「產生圖標」按鈕就可以得到一個 Favicon 圖示,下載回來的圖示檔案記得要重新命名才能使用。

iFreesite Favicon 圖示產生器

網站名稱:iFreesite Favicon 圖示產生器
網站連結:開啟 iFreesite Favicon 圖示產生器

Real Favicon Generator

Real Favicon Generator

Real Favicon Generator 是一個專業的 Favicon 圖示產生器,不僅能製作瀏覽器的網站圖示,連手機和程式語言也包含在內。

開啟網站後,你只要點擊右邊的 Select your Favicon image 按鈕,並選擇想要製作成 Favicon 圖示的圖片檔案。

等待一下後,Real Favicon Generator 就會將轉換完成的 Favicon 圖示提供給你預覽,包含瀏覽器、iOS、Android 等平台。

當確認所有平台的 Favicon 都沒問題後,你就能點擊網頁底部的 Generate your Favicons and HTML code 按鈕來下載。

Real Favicon Generator

網站名稱:Real Favicon Generator
網站連結:開啟 Real Favicon Generator

Favicon & App Icon Generator

Favicon & App Icon Generator

Favicon & App Icon Generator 同樣是專業的線上 Favicon 產生器,能製作多種瀏覽器、手機…等平台的網站圖示。

開啟網站後,請點擊「選擇檔案」按鈕來上傳想要製作成 Favicon 的圖片,然後再按下旁邊的 Create Favicon 按鈕。

這樣 Favicon & App Icon Generator 就會把圖片轉換成各平台通用的 Favicon 圖示,只要點擊 Download 連結即可下載。

Favicon & App Icon Generator

網站名稱:Favicon & App Icon Generator
網站連結:開啟 Favicon & App Icon Generator

Favicon Generator

Favicon Generator

Favicon Generator 是免費的 Favicon 圖示產生器,你只要上傳想要轉換的圖片,就能夠快速製作出 Favicon 圖示。

同時 Favicon Generator 還可以調整圖示的 Favicon 尺寸大小,讓你能簡單、快速的完成網站圖示的製作。

當開啟網站後,你只要點擊 Choose image to UPLOAD 按鈕來選擇圖片,然後再選擇想要的 Favicon 圖示尺寸。

最後,按下右邊的 Create Favicon 按鈕就能開始製作,完成後點擊 Download 按鈕來下載 Favicon 圖示。

Favicon Generator

網站名稱:Favicon Generator
網站連結:開啟 Favicon Generator

Favicon.ico Generator

Favicon.ico Generator

Favicon.ico Generator 是一個方便的 Favicon 線上編輯器,除了能將 PNG、JPG 等圖片檔案轉換成 Favicon 圖示。

這個網站還能線上編輯圖示,如果你覺得這個 Favicon 圖示有哪裡不是很完美,都可以使用網頁中間的工具來調整。

同時在 Top Rated Icons 選項裡,你還可以欣賞到評價最高的作品,註冊帳號後也能夠管理自己曾經編輯過的圖示。

Favicon.ico Generator

網站名稱:Favicon.ico Generator
網站連結:開啟 Favicon.ico Generator

SoftIcons Favicon Generator

SoftIcons Favicon Generator

SoftIcons 其實是國外的一個圖示素材網站,主要提供免費圖示素材的下載,但網站上也有 Favicon 產生器能夠使用。

開啟 SoftIcons 的 Favicon 圖示轉換工具後,你只要點擊 Browse 按鈕來選擇想要轉換的圖片檔案並上傳。

再選擇是否要裁剪圖片或加上特效,最後點擊底下的 Create 按鈕就能夠快速地產生 16 和 32 像素的 Favicon 圖示。

SoftIcons Favicon Generator

網站名稱:SoftIcons Favicon Generator
網站連結:開啟 SoftIcons Favicon Generator

IONOS The Favicon Generator

IONOS The Favicon Generator

IONOS The Favicon Generator 是一個相當不錯的 Favicon 圖示產生工具,能夠快速幫你製作網站的 Favicon 圖示。

你只需要點擊 Create a favicon 按鈕,來上傳 PNG 或 JPG 的圖片檔案,再來這個工具就會自動幫你轉換圖片。

IONOS The Favicon Generator 轉換出來的檔案相當齊全,包含多種平台的 Favicon 圖示,甚至還有如何安裝圖示的教學。

IONOS The Favicon Generator

網站名稱:IONOS The Favicon Generator
網站連結:開啟 IONOS The Favicon Generator

Formito Free Favicon Maker

Formito Free Favicon Maker

Free Favicon Maker 是 Formito 提供的線上網站圖示產生器,對於想製作簡約 Favicon 圖示的人來說是不錯的選擇。

Formito Free Favicon Maker 能讓你線上製作簡單且易於辨識的網站圖示,走的是極簡風格,通常只會有一個英文字母。

當然你也可以選擇使用表情符號 Emoji 來製作 Favicon 圖示,同時 Formito 也有導入 Google Fonts 的雲端字型技術。

當 Favicon 圖示製作完成後,你可以選擇想要輸出的圖片格式,目前有 SVG 和 PNG 兩個格式能夠選擇。

Formito Free Favicon Maker

網站名稱:Formito Free Favicon Maker
網站連結:開啟 Formito Free Favicon Maker

RedKetchup Favicon Generator

RedKetchup Favicon Generator

Favicon Generator 是 RedKetchup 提供的免費線上工具,能夠從圖片、文字來幫你製作出想要 Favicon 圖示。

開啟 RedKetchup Favicon Generator 網站後,你可以在網頁上方選擇要利用文字內容或圖片檔案來製作 Favicon。

當選擇好圖示的製作方式後,你就可以在 Configure Text 選項裡設置你的 Favicon 圖示,右邊會有圖示的即時預覽。

當全部都設置完成後,就可以點擊網頁下方的 Generate Favicon 按鈕來產生網站圖示,相當的簡單與方便!

RedKetchup Favicon Generator

網站名稱:RedKetchup Favicon Generator
網站連結:開啟 RedKetchup Favicon Generator

ConvertICO

ConvertICO

ConvertICO 是可以互相轉換 PNG 與 ICO 的檔案的線上工具,其中 ICO 檔案經常被用來當作網站的 Favicon 圖示。

除了能夠快速轉換 PNG 與 ICO 格式外,ConvertICO 也支援 JPG 和 SVG 等圖片格式轉換成 ICO 檔,相當的便利!

你只要透過 ConvertICO 來上傳想要轉換成 Favicon 的圖片,就能夠快速製作出想要的 Favicon 圖示檔案。

ConvertICO

網站名稱:ConvertICO
網站連結:開啟 ConvertICO

Favicon.io

Favicon.io

Favicon.io 是一個線上 Favicon 轉換與製作工具,能夠協助你製作網站的 Favicon 圖示,目前支援文字、圖片與表情符號。

當你開啟網站後,Favicon.io 會提供三種選項來讓你製作 Favicon 圖示,請根據自己的需求來選擇適合的製作方式。

如果你是選擇圖片,只要直接上傳 JPG、PNG 等圖片檔案,再點擊下面的 Download 按鈕,就能取得 Favicon 圖示。

Favicon.io

網站名稱:Favicon.io
網站連結:開啟 Favicon.io

FavICO

FavICO

FavICO 其實是 ConvertICO 網站的另一個線上工具,專門用來製作網站的 Favicon 圖示,同樣只支援上傳圖片。

當開啟 FavICO 網站後,請點擊 Browse 按鈕來上傳圖片檔案,並選擇想要轉換的 Favicon 圖示尺寸。

最後,只要按下 Create 按鈕就能夠立刻轉換圖片並下載,唯一要注意的是 FavICO 無法上傳超過 500 KB 的圖片。

FavICO

網站名稱:FavICO
網站連結:開啟 FavICO

如何製作 Favicon 圖示

文章相關教學步驟

如何使用 Favicon 產生器來製作網站圖示:

STEP

選擇一個 Favicon 產生器

首先,你需要選擇一個 Favicon 產生器,我個人推薦:Favicon.io。

STEP

選擇製作 Favicon 的圖片

開啟 Favicon 產生器後,請選擇一個想要製作成 Favicon 的圖片,並把它上傳到 Favicon 產生器的網站。

STEP

預覽完成的 Favicon 圖示

選擇你要的 Favicon 尺寸後,就可以點擊「Generate 產生」按鈕來製作 Favicon 圖示,通常網站上都會提供完成的圖示給你進行預覽。

STEP

下載完成的 Favicon 圖示

確認沒問題後,你就可以點擊 Download 按鈕來下載完成的 Favicon 圖示。

Favicon 的建議尺寸大小

精選 Favicon 產生器

根據 Google 的建議,Favicon 尺寸至少要是 48 像素的倍數,例如:48×48 像素、96×96 像素、144×144 像素…等。

如你是使用 SVG 可縮放向量圖形格式,則不限定尺寸大小,但需要注意的 Favicon 圖示必須是正方形的!

Favicon 怎麼在網站上使用

文章相關教學步驟

如何在網站上使用 Favicon 圖示:

STEP

將 Favicon 檔案上傳到網站

首先,請把你剛剛製作的 Favicon 圖示檔案上傳到網站的根目錄,並將檔案名稱改成 favicon.ico。

STEP

網站中加入 Favicon 程式碼

再來,你需要在網站的 index.html 檔案裡,加入下面這段 Favicon 圖示的程式碼,並且要放在 <head> 的標籤裡。

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
STEP

儲存查看你的 Favicon 圖示

最後,請儲存修改過後的 index.html 檔案,並重新整理你的網站,這樣應該就能夠看到瀏覽器上開始顯示你的 Favicon 圖示了。

Favicon 網站圖示常見問題

常見問題
Favicon 有什麼用途?

Favicon 是網站或網頁的標誌圖示,通常會顯示在網址列和書籤中,能夠幫助使用者區分不同的網站。

Favicon 的格式是什麼?

Favicon 以 PNG 和 ICO 圖片格式最為常見,目前大部分的線上 Favicon 產生器都是提供 ICO 格式。

Favicon 的尺寸要多大?

Google 建議 Favicon 至少要有 48×48 像素,或其的倍數,例如:96×96、144×144 像素…等。

TechXG網站創辦人、編輯
目前專注於網站經營與行銷,擁有超過 10 年以上使用軟體、線上工具的經驗,且對於 3C 產品、家電有著極大的興趣與熱情,平日喜愛在網路世界、書本裡探索新的知識,並將實用的資訊分享給讀者。
分享這篇文章