在 Mac 上產生網站 Favicon
網站需要的所有 Favicon，加上 Web Manifest 和可直接貼到網頁中的 HTML。
在 Mac 上使用「Favicon 產生器」
App 的截圖，使用範例檔案。
如何使用「Favicon 產生器」
- 1
拖入你的標誌
使用一張圖片，最好是正方形且至少 512 px。非正方形圖片會被裁成置中的正方形。
- 2
加入你的網站資訊
輸入網頁資訊清單的網站名稱和主題顏色，並選擇 Apple 觸控圖示背景。
- 3
按一下「製作 Favicon」
會產生所有 Favicon 檔案，以及 Manifest 和 HTML 程式碼片段。
- 4
上傳到你的網站
將「favicons」資料夾（位於「下載項目」› OneMacTools 中的日期資料夾）裡的檔案拷貝到網站根目錄，並把 HTML 貼到網頁的 <head> 中。App 中也會顯示這段程式碼。
「Favicon 產生器」的功能
用一個標誌即可產生內含 16、32 和 48 px 的 favicon.ico、16 和 32 px 的 PNG、純色背景的 180 px Apple 觸控圖示（在 iPhone 上不會變黑），以及適用於 Android 和可安裝網頁 App 的 192 和 512 px 圖示，另外還有包含網站名稱和主題顏色的 site.webmanifest，以及可貼到 <head> 中的 HTML 程式碼片段。
適合用於
- 為新網站加上 Favicon
- 讓網站可以安裝到手機上
- 換掉模糊的 Favicon
選項說明
- 網站名稱
- site.webmanifest 中使用的名稱，有人將你的網站安裝到手機上時會顯示。留空的話，會使用影像的檔名。簡稱為前 12 個字元。
- 主題顏色
- 十六進位顏色，例如 #1E90FF，用作瀏覽器的主題顏色和 manifest 的背景顏色。留空則為白色。
- Apple 觸控圖示背景
- 白色、主題顏色或黑色。iPhone 會將透明的主畫面圖示顯示在黑色上，因此 180 px 的 Apple 觸控圖示會加上純色背景。
- 圓角
- 預設關閉。在每種 Favicon 尺寸中將你的標誌加上圓角。
最佳做法
- 請用簡單的圖形，而非帶文字的完整標誌。在 16 px 下，只有粗獷的形狀還能辨認。
- 從透明背景的 PNG 開始，Favicon 在淺色和深色的瀏覽器分頁上都會很好看。
- 以十六進位值輸入主題顏色。它會為部分手機上的瀏覽器介面著色，請選擇你的主要品牌顏色。
- 上傳後，請在無痕視窗中開啟你的網站檢查新圖示，因為瀏覽器會長時間快取 Favicon。
搭配使用
- 輸入
- 一張影像，最好是 512 px 以上的正方形 PNG。
- 輸出
- 一個「favicons」資料夾，內含 favicon.ico（包含 16、32 和 48 px）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180 px）、android-chrome-192x192.png 和 android-chrome-512x512.png，以及 site.webmanifest 和 add-to-head.html。
- 非正方形的影像會置中裁切成正方形。
關於「Favicon 產生器」的問題
網站需要哪些 favicon 檔案？
favicon.ico 供舊版瀏覽器使用，16 和 32 px 的 PNG 用於分頁，180 px 的 Apple 觸控圖示用於 iPhone 主畫面，192 和 512 px 圖示搭配 Web Manifest 則用於 Android。OneMacTools 會產生所有檔案，以及可貼到網頁 <head> 中的 HTML。
檔案會存到哪裡？
放在網站的根資料夾，與 index.html 同一層。HTML 片段和 manifest 都預期檔案位於那裡。
如何在 Mac 上製作 favicon.ico？
將標誌拖到「Favicon 產生器」上並點按「製作 Favicon」。會製作內含 16、32 和 48 px 版本的 favicon.ico，以及各種 PNG 尺寸。
為什麼我的圖示在 iPhone 主畫面上看起來是黑色的？
iOS 會將主畫面圖示中的透明區域顯示為黑色。為避免這種情況，Apple 觸控圖示會放在純白、純黑或主題顏色的背景上。
site.webmanifest 有什麼用途？
當有人把你的網站加入主畫面或安裝成網頁 App 時，它會告訴手機你網站的名稱、圖示和顏色。
我的新 Favicon 沒有顯示，是哪裡出了問題？
瀏覽器會積極快取 Favicon。請確認檔案位於網站根目錄，且程式碼片段位於 <head> 中，然後在無痕視窗中重新載入。
「Favicon 產生器」會上傳我的檔案嗎？
不會。「Favicon 產生器」完全在你的 Mac 上執行，檔案絕不會離開你的 Mac，也能離線使用。
「Favicon 產生器」會更改我的原始檔案嗎？
不會。結果會另存為新檔案，放在「下載項目 › OneMacTools」中以日期命名的資料夾；除非你開啟了另有說明的選項，否則原始檔案會完全保持原樣。
「Favicon 產生器」需要什麼？
只需要一台搭載 macOS 26 或以上版本的 Mac。不需另外安裝任何東西。
接下來這樣做
製作 1200 × 630 的卡片，在 X、LinkedIn、Slack、WhatsApp 和 iMessage 上分享連結時顯示。
App 圖示產生器一張正方形影像產生所有 App 圖示：Xcode 用的 iOS 資源目錄、Android 啟動器和自適應圖示，以及 Mac .icns。
