分類: 影像工具
favicon 產生器
一張圖產生整套網站圖示
開啟一張標誌圖，即可得到 16、32、48、64、128、180、192、512 像素的 PNG 圖示，以及可直接貼進 head 的 link 標籤。每個尺寸都在瀏覽器裡繪製，圖片不會被上傳。
請選擇要壓縮的圖片。
放進 <head> 的 HTML
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
請把檔案存在網站根目錄，上面的網址才能解析；檔名請保持穩定，favicon 換了位置就得重新檢索。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
favicon 早就不只一個檔案了。瀏覽器分頁要 16、32、48 像素，高解析螢幕需要 64 與 128，iOS 讀取 180 像素的 apple-touch-icon，Android 的 Web 應用資訊清單則要 192 與 512。這個工具用一張來源圖產生全部尺寸，每個尺寸一塊 canvas，把圖案等比放進正方形而不是拉伸變形，並給出以穩定網址引用它們的標籤程式碼。全部輸出 PNG：現今在用的瀏覽器都能讀 PNG favicon，而老舊的 ICO 格式並換不到什麼好處。
使用方式
- 選擇一張標誌或正方形圖片，最好是 512 x 512 或更大。
- 需要時加上留白；若圖示必須不透明，就填滿背景。
- 逐一下載各尺寸，存到網站根目錄，並把 HTML 貼進 head。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 我的標誌圖會被上傳嗎？
- 不會。每個圖示都在本頁的 canvas 上繪製，並以本機下載的形式提供，圖片不會離開你的裝置。
- 來源圖應該多大？
- 至少 512 x 512 的正方形，圖形四周留一點空隙。比這更小的圖在產生大尺寸時只能放大，看起來會模糊。
- 還需要 favicon.ico 檔案嗎？
- 對現在的瀏覽器不需要，它們都能讀取以 link 標籤宣告的 PNG 圖示。少數很舊的軟體仍會請求 /favicon.ico，已經有的話留著也無妨。