Apple Touch Icon 產生器
在你的瀏覽器中本機製作 iOS 用於主畫面書籤的 180×180 apple-touch-icon——以及完整的 favicon 組合。不會上傳任何內容。
隱私優先:每張圖片都在你的瀏覽器中本機處理。任何內容都不會上傳、儲存或傳輸到任何伺服器。
iOS 放到主畫面上的那個圖示
當有人把你的網站加到 iPhone 或 iPad 的主畫面時,iOS 會去找 180×180 的 apple-touch-icon;如果沒有,它就會退而使用一張模糊的螢幕截圖。這個產生器會從你的圖片算繪出正好的尺寸——並使用純色背景,因為 apple-touch-icon 不應該是透明的——再連同 favicon.ico 與 Android 圖示一起放進下載檔中。
匯出一次,涵蓋所有平台
與其為每種裝置手動裁切一個檔案,不如一次產生整組:iOS 用的 apple-touch-icon、Android 與 PWA 用的 192 與 512px PNG,以及桌機瀏覽器用的 favicon.ico,還附上引用它們的 HTML 程式碼片段。一切都在你的瀏覽器中執行,因此你的品牌素材絕不會離開你的裝置。
常見問題
- 製作 favicon 時我的圖片會被上傳嗎?
- 不會。favicon.ico、PNG 圖示與 manifest 全都透過 Canvas API 在你的瀏覽器本機產生。你的圖片永遠不會離開裝置。
- 我會拿到哪些尺寸與檔案?
- 一個多解析度的 favicon.ico(16、32 與 48px)、16、32、48、180(apple-touch-icon)、192 與 512px 的 PNG 圖示、一個 site.webmanifest,以及一段可貼進 <head> 的 HTML 程式碼片段。
- 我可以把 PNG 或 SVG 轉成 ICO 嗎?
- 可以。丟入 PNG、JPG、SVG 或 WebP,就能下載真正的 favicon.ico。SVG 標誌會先在本機以高解析度點陣化。
- 什麼樣的圖片效果最好?
- 簡潔、高對比的方形標誌。非方形的圖片會置中裁切以符合比例;你可以用內距與形狀控制項,把它框成你想要的樣子。
- 我要如何安裝 favicon?
- 把套件解壓縮到網站的根目錄,並把提供的 HTML 程式碼片段貼進頁面的 <head>。大多數瀏覽器都會自動抓取 favicon.ico。