最受歡迎的建議是從 2014 年編寫的生成器複製的十幾個 PNG 尺寸的清單。大多數這些尺寸不再起任何作用。網站今天需要的東西很短:一 favicon.ico 對於仍在尋找它的瀏覽器和工具,一個可擴展或高解析度的圖標適用於所有現代產品,一個觸控圖標適用於手機。讓人絆倒的部分是。ico本身,因為它不是一個具有奇怪擴展的圖像。它是一個裝有多個圖像的小容器。
本指南介紹如何建立 ICO 檔案、哪些大小屬於 favicon。ico 以及為什麼網站需要哪些其他圖示檔案以及導致圖示在瀏覽器標籤中看起來柔軟或無法讀取的錯誤。它位於下面 圖像工具集線器,toolz 轉換器引用的每個尺寸都來自其原始碼。
TL;DR: ICO 檔案是一個容器:一個短目錄,後面跟著幾個方形圖像,每個大小一個,瀏覽器或作業系統從中選擇最接近的匹配。對於 favicon。ico,包括 16、32 和 48 px,如果同一檔案兼作 Windows 圖標,則新增 256 px。每個條目最多可容納 256 x 256 像素。除此之外,還聲明一個 SVG 或大型 PNG 圖示和一個 180 x 180
apple-touch-icon. 的 PNG 到 ICO 轉換器 將 16、32、48 和 256 px 條目寫入 PNG,透明、客戶端、未上傳、免費、未註冊。
什麼是 ICO 檔案?
ICO 檔案是 Windows 圖示格式:標頭、列出內部每個影像的目錄以及每個條目的影像資料。微軟在其中記錄了佈局 圖示技術文章,自 Windows 第一個版本以來,它一直是 Windows 程式、快捷方式和資料夾圖示的格式。瀏覽器在 20 世紀 90 年代末將其用於圖示,這就是為什麼大多數網站上的檔案仍然被呼叫 favicon.ico.
該目錄是它與 PNG 或 JPG 不同的原因。需要 16 像素圖示的軟體讀取目錄,找到最接近 16 的條目,然後繪製該圖示。選項卡、書籤清單、工作列按鈕和桌面快捷方式都可以從同一檔案中取得不同的影像。這使得設計人員可以為小尺寸提供簡化的標記,為大尺寸提供詳細的標記,而不是讓單一影像隨處縮放。
此格式有兩種媒體類型。 IANA 列表 image/vnd.microsoft.icon,而大多數伺服器和瀏覽器使用較舊的伺服器和瀏覽器 image/x-icon. 兩者都為網站圖示工作。
ICO 檔案是如何建構的?
ICO 檔案以 6 位元組標頭開頭,後面跟著每個影像一個 16 位元組目錄條目,後面跟著影像資料。所有數字都是小字節序。
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
此佈局中的兩個細節解釋了有關圖示的大部分令人困惑的事情。
256 像素上限來自一個位元組。 寬度和高度各儲存在一個位元組中,可以容納 0 到 255。該格式重複使用 0 表示 256,並且無法表達任何更大的內容。無論生成器聲稱什麼,有效的 ICO 中都不能存在 512 x 512 條目。
條目可以是 PNG。 早期的圖示將每個影像儲存為未壓縮的位圖,並帶有單獨的 1 位元透明遮罩。自 Windows Vista 以來,條目可以保存完整的 PNG 文件,該文件在大尺寸下要小得多,並帶有適當的 alpha 通道。儲存為未壓縮 32 位元位圖的 256 x 256 圖示約為 256 KB;與 PNG 相同的圖像通常只是其中的一小部分。
Toolz 轉換器編寫現代變體。它的 ICO 建構器設定類型 1,每個大小一個目錄條目,每個像素有平面 1 和 32 位,將 256 寫為 0,並將每個條目儲存為具有 alpha 通道的 PNG。在寫入任何內容之前,要求其大小在 1 到 256 之外會被拒絕,因為目錄無法記錄它。
圖標應該有多大?
如果您也希望檔案充當 Windows 圖標,favicon。ico 應包含 16 x 16、32 x 32 和 48 x 48 映像,以及 256 x 256 映像。除了。ico 之外,現代瀏覽器更喜歡帶有連結標籤的 SVG 或大型 PNG,而手機則使用單獨的觸控圖示。
此表將每種大小對應到其使用位置。確切的行為因瀏覽器、作業系統和顯示縮放而異,因此將其視為常見情況:
| 尺寸 | 它出現在哪裡 | favicon.ico 需要嗎? |
|---|---|---|
| 16 x 16 | 標準顯示器上的瀏覽器標籤、網址列、書籤 | 是的 |
| 32 x 32 | 高密度顯示器、Windows 工作列和快捷方式上的選項卡 | 是的 |
| 48 x 48 | Windows 桌面快捷方式、中等圖示視圖; Google 搜尋建議比這個更大 | 是的 |
| 256 x 256 | Windows 大圖示視圖和超大圖示視圖 | 僅當用作 Windows 圖示時 |
| 180 x 180 | iPhone 和 iPad 主螢幕 (apple-touch-icon) |
不,單獨的 PNG |
| 192 x 192 | Android主畫面、Web應用程式清單 | 不,單獨的 PNG |
| 512 x 512 | Web 應用程式清單、安裝和啟動畫面 | 不,無法放入 ICO |
| 任何(svg) | 支援 SVG 圖示的現代瀏覽器,包括深色模式變體 | 不,單獨的 SVG |
關於搜尋結果, Google's favicon 指南 索取一個方形圖示並推薦一個大於 48 x 48 像素的圖標,Google 從您主頁上聲明的圖示中獲取它。最高為 16 像素的 。ico 是網站和#39 的常見原因;其搜尋結果旁邊的圖示看起來模糊。
網站需要哪些網站圖示檔案?
一個網站需要三個圖示檔案和一個清單條目來覆蓋每個主流瀏覽器和裝置。除此之外幾乎總是剩菜。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
每行都有一個工作:
favicon.ico是後備。這 WHATWG HTML 標準 讓瀏覽器請求/favicon.ico當頁面完全聲明沒有圖示時,從網站根目錄開始,RSS 閱讀器、爬蟲和舊工具仍然可以。即使您聲明其他圖標,也要將檔案保留在根目錄中。icon.svg是支援 SVG 收藏夾的瀏覽器的銳利圖示。它可以擴展到任何密度並且可以包含一個prefers-color-scheme媒體查詢,使圖示適應深色標籤。並非每個瀏覽器都尊重它,這就是 。ico 保留的原因。apple-touch-icon.png當有人將您的網站新增至主畫面時,ios 使用的比例為 180 x 180。為其提供不透明的背景,因為 iOS 無法保持主畫面圖示的透明度。- 192 和 512 處的清單圖示是基於 Android 和 Chromium 的瀏覽器在將網站安裝為應用程式時使用的圖標,如 中所述 W3C Web 應用程式清單.
的 sizes 。ico 連結上的屬性在某種程度上很重要。當瀏覽器看到 SVG 和大小為 .ico 的時,它可以判斷 SVG 是可擴展的選擇。一些設定使用 sizes="any" 相反,在 .ico 上,一些 Chrome 版本的回應是選擇 .ico 而不是 SVG。特定的尺寸可以避免這種情況。
為什麼我的收藏夾看起來模糊或錯誤?
大多數圖標問題來自來源圖像,而不是格式。 ICO 儲存每種尺寸給出的任何內容,並且縮放只能在一個方向上順利進行。
| 症狀 | 原因 | 修復 |
|---|---|---|
| 柔軟、有斑點的 256 px 條目 | 源小於 256 px,因此被拉伸 | 從 512 x 512 或更大的出口開始 |
| 標誌被壓扁或拉伸 | 非方形源拉伸為方形 | 轉換前將作物或墊子鋪成方形 |
| 選項卡中無法讀取文字標記 | 以 16 像素繪製的文字有兩個像素高 | 單獨使用 16 和 32 px 的符號 |
| 薄薄的輪廓消失了 | 小尺寸行程低於 1 px | 小尺寸變體中的粗筆畫 |
| 圖示周圍的白框 | JPG 來源沒有透明度 | 使用具有 alpha 通道的 PNG |
| 舊圖示不斷顯示 | 瀏覽器積極快取圖示 | 重新命名檔案或新增查詢字串,然後硬刷新 |
| Google 結果中沒有圖示 | 圖示低於 48 px,被 robots。txt 阻止,或不在主頁上 | 從主頁提供更大的圖示並允許爬行 |
第一行值得詳細說明,因為它也吸引了經驗豐富的設計師。 64 px 來源轉換為 256 勾選會產生 256 px 條目,即放大四倍的 64 px 影像。這正是條目高密度 Windows 視圖和大快捷方式顯示的內容。從大來源縮小是看起來不錯的方向。
第三行是算術問題。 16 x 16 圖示總共有 256 個像素。擠壓到該寬度的五個字母的文字標記每個字母大約得到三個像素,抗鋸齒將這些像素變成灰色污跡。因此,幾乎每個知名網站都使用單一字母或符號作為其收藏夾。
如何從 PNG 製作 favicon。ico?
匯出至少 512 x 512 像素且具有透明背景的方形 PNG,將其轉換為具有所需尺寸的 ICO,並在發布前檢查實際尺寸的 16 px 條目。
使用 PNG 到 ICO 轉換器 在工具上:
- 放下巴布亞紐幾內亞。幾個可以同時進入;每個都成為自己的。ico。
- 選擇圖示大小。所有四個框,16、32、48 和 256 px,都勾選以開始。對於純圖標,取消勾選 256 以使檔案更輕,因為 256 條目是其大部分權重。如果您取消勾選所有四個,轉換器將回退到寫入所有四個而不是產生空圖示。
- 按轉換為 ICO。一個正方形 512 x 512
logo.png回來時為logo.ico附註解和報價;包含 16、32、48、256 個 px 圖示。&報價; - 下載該文件,或進行批次處理
converted-ico.zip.
轉換器將您的圖像以每種尺寸繪製到畫布上,將每個正方形編碼為 PNG,並將它們最小的一個首先打包到一個。ico 中,全部為客戶端。透明度保持在每種尺寸。非正方形來源被拉伸以填充每個正方形而不是裁剪,並且註釋如此說明:放下 1024 x 256 字標,它報告圖像為 1024x256 並被拉伸到您選擇的尺寸的正方形。該註釋是您首先裁剪或填充的提示。
為了獲得小尺寸的最佳效果,請製作兩個 PNG:一個用於 48 和 256 px 的詳細 PNG,以及一個用於 16 和 32 px 的簡化符號。轉換每個檔案時僅勾選其大小。轉換器為每個檔案寫入一個來源,因此雙影像方法為您提供兩個。ico 檔案;使用簡化的作為 favicon.ico,由於瀏覽器主要選擇小條目,而詳細條目則用於 Windows 應用程式或快捷方式圖示。
我可以用 JPG 或 SVG 製作 ICO 嗎?
兩者都是肯定的,但每個都有一個警告。
JPG 可以工作,但每個圖示條目都顯示為沒有透明度的填充正方形,因為 JPEG 沒有 alpha 通道,也沒有轉換器可以恢復一個。這 JPG 到 ICO 轉換器 將照片重新取樣到相同的 16、32、48 和 256 px 方塊中。照片在 16 px 時也會失去幾乎所有細節,因此請緊緊地圍繞單一高對比度主題進行裁剪,並在轉換之前使裁剪方格。按原樣轉換的 4032 x 3024 電話照片被水平擠壓,註釋會告訴您這一點。
SVG 是最好的來源,因為它沒有固定的分辨率,並且在每個入口尺寸下都呈現清晰度。路線取決於您想要多少控制。這 SVG 到 PNG 轉換器 將 SVG 渲染為 PNG,您可以先檢查和編輯;任何最長邊低於 512 px 的 SVG 都會繪製在 512 處,因此 24 x 24 圖示 SVG 仍然為 256 條目提供乾淨的來源。或將 SVG 直接放入一般中 影像轉換器,接受SVG、PNG、JPG等十幾種格式,並選擇ICO作為目標,一步渲染打包。
| 來源 | ICO 的透明度 | 256 px 時的清晰度 | 最佳用途 |
|---|---|---|---|
| SVG | 保留 | 尖銳,由向量呈現 | 您擁有的向量形式的標誌 |
| PNG 512 px 或更大 | 保留 | 尖銳 | 最喜歡的 |
| 256 px 以下的巴布亞紐幾內亞 | 保留 | 軟256 | 取消勾選 256,或重新匯出更大 |
| JPG | 無,填滿正方形 | 取決於來源大小 | 僅基於照片的圖示 |
| 現有 ICO | 保留 | 從瀏覽器解碼的條目重建 | 變更檔案攜帶的大小 |
現有的。ico 也可以回饋。轉換器從不將 ICO 視為 ICO 的重命名;它總是以您勾選的大小重建檔案。這是一種將臃腫的圖標刪除到 16、32 和 48 的快速方法,儘管它從瀏覽器解碼的一個條目進行重建,因此如果您有原始藝術作品,請從原始藝術作品開始。 SVG 對 PNG 涵蓋了為什麼向量主控值得保留以進行這種再導出。
到 2026 年,favicon.ico 仍然重要嗎?
是的,作為後備。目前瀏覽器使用您聲明的 SVG 或 PNG 圖標,但使用 root /favicon.ico 仍然是一些瀏覽器、提要閱讀器、書籤工具和爬蟲在沒有找到聲明或不支援聲明的類型時獲取的內容。遺失的檔案也會為伺服器日誌填入 404,因為無論檔案是否存在,這些請求都會到達。
不再重要的是傳統尺寸的長尾。單獨的 57、60、72、76、114、120、144 和 152 像素觸控圖示來自較舊的 iOS 版本,並由單一 180 px 檔案覆蓋。 Windows 圖塊映像已聲明通過 browserconfig.xml 屬於 Windows 8 和 10 Start 螢幕圖塊。新網站也不需要。
以下是實際的最小集,其中包含預期的檔案大小:
| 文件 | 像素大小 | 典型體重 | 需要嗎? |
|---|---|---|---|
favicon.ico 與 16、32、48 |
16、32、48 | 一些KB | 是的,作為後備 |
icon.svg |
可擴展 | 低於 2 KB 表示簡單標記 | 推薦 |
apple-touch-icon.png |
180 x 180 | 5 至 20 KB | 是的,適用於 iOS |
icon-192.png, icon-512.png |
192、512 | 10 至 60 KB | 如果網站有清單 |
瀏覽器中的轉換圖示是否私有?
是的。在 Toolz 上,解碼、調整大小、PNG 編碼和打包。ico 都會發生在客戶端、瀏覽器標籤內,因此不會上傳任何圖像,並且頁面在加載後會保持離線工作。連接到來源的元資料和顏色設定檔會透過畫布步驟刪除,這對於圖示來說是無害的。
超過 100 兆像素的圖像和空檔案將被拒絕並帶有訊息,超過 50 MB 的 SVG 來源將被拒絕。這些工具是免費的,無需註冊,每天都有轉換限制。
