Command Palette

Search for a command to run...

PN

PNG 轉 ICO 轉換器

在瀏覽器中批次將 PNG 圖片轉換為 ICO 網站圖示

贊助Toolz.dev 使用的主機Hostinger Partner
使用 Hostinger 讓您的網站上線
  • 免費網域
  • 免費 SSL
  • 30 天退款保證
Trustpilot 評分 4.6,超過 73,000 則評價
領取優惠 優惠碼

什麼是 PNG 轉 ICO 轉換器?

PNG 轉 ICO 轉換器會把一張 PNG 圖片按你指定的每種尺寸製作成方形副本,再打包進同一個 .ico 檔案。這正是大多數人第一次嘗試時最容易搞錯的地方:.ico 並不是換了個特殊副檔名的單張圖片,而是一個小型容器,開頭有一份目錄,列出裡面每張圖片以及各自的起始位置。無論是瀏覽器繪製分頁圖示,還是桌面繪製捷徑圖示,讀取檔案時都會查看這份目錄,並選用最接近所需尺寸的項目。

此頁面會寫入四種尺寸,開啟時全部已勾選:16、32、48 和 256 像素。每個勾選的方塊都會在 .ico 內變成一張方形圖片,以 PNG 壓縮方式儲存並完整保留 alpha 色版,尺寸則由小到大依序寫入。取消勾選不需要的尺寸,檔案就會變小。如果四個全部取消,轉換器會改為寫入全部四種尺寸,因為沒有任何內容的圖示不是有用的檔案。256 的上限是格式本身的限制,而不是工具的限制:ICO 目錄項目只用一個位元組記錄寬度,所以 256 是 .ico 能容納的最大圖片尺寸,並且以特殊值 0 表示。

請從一張方形 PNG 開始,且尺寸至少要與你勾選的最大尺寸一樣大。轉換器會將圖片縮小到每個方形尺寸,而縮小正是效果較好的方向。如果來源只有 64 px 卻勾選了 256,那麼 256 的項目就是把 64 px 圖片放大四倍,畫面模糊又有斑駁感,偏偏這正是高 DPI 螢幕最容易看出來的尺寸。從設計工具匯出一張 512x512 的圖片,就足以涵蓋所有情況,還綽綽有餘。

非方形的標誌是另一個常見問題。轉換器會把圖片拉伸以填滿每個方形,而不是讓內容溢出或自行猜測裁切範圍,並且會告訴你它這樣做了:放入一張 1024x256 的文字標誌,該列會顯示「圖片為 1024x256,因此已拉伸為 16、32、48、256 px 的方形。」無論如何,拉伸後的文字標誌在 16 px 下根本看不清楚。解決辦法是在轉換之前,而不是之後,先決定小尺寸要呈現什麼。通常這表示單獨裁切出圖形標誌,或者把文字標誌放到帶有透明邊距的方形畫布上,讓它保持原有比例,只是在圖示中顯得小一些。

以下是完整的操作流程。取一個名為 logo.png 的 512x512 檔案,保持四個方塊全部勾選,然後放入。它會立即轉換:該列會顯示輸入大小、箭頭、輸出大小和大小變化,下方附有「包含 16、32、48、256 px 圖示。」的說明,點擊該列的下載圖示即可儲存 logo.ico。取消勾選 256,檔案會自動重新轉換:同一個來源現在會產生輕得多的檔案,內含三張圖片,因為 256 px 的項目佔了大部分容量。一次放入八張品牌 PNG,點擊「全部下載(8 張圖片)」會寫出 converted-ico.zip,裡面包含每個 .ico,重複的檔名會自動編號,而不會互相覆蓋。

所有處理都在瀏覽器端完成。你的瀏覽器會解碼 PNG,在畫布上以每個要求的尺寸繪製,將每個方形編碼為 PNG,並在記憶體中組合成 .ico,因此圖像不會離開你的裝置,頁面載入完成後,即使斷開網路也能繼續使用。每種尺寸都會保留透明度,背後不會填入任何顏色。來源檔案附帶的中繼資料和色彩設定檔會在畫布處理步驟中被移除。超過 100 百萬像素的圖片會被拒絕並顯示訊息,空檔案也會被拒絕,檔案大小(位元組)沒有上限。本工具免費,無需註冊,每日轉換次數有限制。

如何將 PNG 轉換為 ICO

  1. 加入 PNG 檔案

    將 PNG 圖片拖放到標有「將 PNG 圖片拖放到此處或點擊上傳」的方框中,或點擊方框來選擇檔案。每個檔案一加入就會開始轉換。來源為 256 px 或更大的方形圖片,在每種圖示尺寸下都能得到最佳效果。

  2. 選擇圖示尺寸

    在「圖示尺寸」下,勾選你想放進 .ico 的方形尺寸:16px、32px、48px 和 256px 預設全部勾選。每個勾選的方塊都會向檔案加入一張圖片,勾選或取消勾選方塊會讓所有已加入的檔案重新轉換。

  3. 檢查每個結果

    每一列會顯示縮圖、狀態、帶有大小變化的檔案大小行,以及列出已寫入尺寸的說明。如果非方形圖片必須被拉伸成方形,還會顯示警告和真實尺寸。點擊縮圖可查看放大的圖示,並比較轉換前後的差異。

  4. 下載圖示

    點擊某一列的下載圖示即可儲存單一檔案,或點擊清單標題中的「全部下載(n 張圖片)」,這會儲存 converted-ico.zip,批次檔案都在其中。

為什麼要將 PNG 轉換為 ICO?

現在很多地方都接受直接使用 PNG 作為圖示,所以不妨問一句:為什麼還要製作這種較舊的容器格式?有三種用途仍然需要真正的 .ico 檔案。

放在網站根目錄的 favicon.ico

當頁面沒有宣告圖示時,瀏覽器和許多顯示網站圖示的工具都會去找 /favicon.ico。該位址上的單一 .ico 就能滿足所有這些需求,而且由於它包含多種尺寸,無論是在分頁、書籤列還是釘選的捷徑上,看起來都很合適。

Windows 捷徑、資料夾和安裝程式

Windows 會讀取 .ico 檔案,用作捷徑圖示、自訂資料夾圖示和應用程式內嵌的圖示。它會選擇與目前檢視相符的項目,所以同一個檔案既能用於小圖示清單檢視,也能用於超大圖示檢視。單獨一張 PNG 做不到這一點。

保留設計匯出檔的透明度

從設計工具匯出的標誌通常是背景透明的 PNG,這正是正確的起點。這裡寫入的每種尺寸都以 PNG 形式儲存在容器內,因此透明背景在 16 px 和 256 px 下都能保留。如果是從照片開始呢?JPG 轉 ICO 轉換器可以處理這種情況,不過 JPG 本身不帶透明度。

PNG 與 ICO:該用哪一個

PNG 與 ICO 作為圖示格式的比較
項目PNGICO
檔案內容一張圖片。多張方形圖片,每種尺寸一張,並附有列出這些圖片的目錄。
壓縮方式無損。取決於各個項目。本頁會將每個項目都以無損 PNG 儲存。
透明度完整的 alpha 色版。32 位元和 PNG 項目支援完整 alpha,本頁寫入的正是這種項目。
動畫標準 PNG 不支援。不支援。
最大圖片遠超圖示所需的任何尺寸。每個項目 256 x 256 像素。
一般檔案大小單張圖示尺寸的圖片很小。較大,因為包含所有尺寸。256 px 的項目佔了大部分容量。
瀏覽器與軟體支援所有瀏覽器和編輯器皆支援。目前的瀏覽器接受將其用作 favicon。所有瀏覽器都支援作為 favicon,Windows 也支援用作捷徑和應用程式圖示。
最適合用 link 標籤宣告的美術圖像、網頁圖片和圖示。favicon.ico、Windows 圖示,以及任何需要一個檔案涵蓋多種尺寸的場合。

Favicon 尺寸說明

.ico 內的每種尺寸之所以存在,是因為有程式會以大約該尺寸繪製圖示。哪個程式使用哪個項目,會因瀏覽器、作業系統和顯示縮放比例而異,因此請把下面的清單視為常見情況,而不是硬性規定。

各種 ICO 尺寸的常見用途
尺寸常見用途
16 像素標準螢幕上的瀏覽器分頁、網址列和書籤清單。
32 像素高密度螢幕上的瀏覽器分頁,以及 Windows 的工作列和捷徑圖示。
48 像素Windows 的桌面捷徑和中圖示檢視。
256 像素大圖示和超大圖示檢視,以及極高密度的螢幕。

小圖示尺寸最重要,因為人們整天都在看這些尺寸,細節也最先在這裡流失。帶有文字標誌、細線輪廓或標語的標誌,通常需要為 16 和 32 px 準備較簡單的版本:只保留圖形符號,筆畫要夠粗,才能在只有幾個像素寬時依然清晰。

手機的觸控圖示是另外一個檔案。例如,iPhone 主畫面捷徑會使用以專屬 link 標籤宣告的較大 PNG,.ico 無法取代它。

隱私與安全

  • 縮放和打包都在用戶端透過瀏覽器的 Canvas API 完成。PNG 和完成的 .ico 都不會離開這個分頁。
  • 尚未發布的標誌或品牌圖樣,可以直接轉換,不必交給第三方服務。
  • 每日使用量檢查只會傳送檔案數量、總大小(位元組)和目標格式,不包含檔案名稱和影像像素。
  • PNG 中的中繼資料和色彩設定檔不會複製到圖示項目中。
  • 完成的圖示會保存在記憶體中,直到您移除它們、按「全部清除」或關閉分頁為止,伺服器上不會儲存任何副本。

主要功能

  • 一個檔案包含四種圖示尺寸

    16、32、48 和 256 px,每種尺寸都是 .ico 內獨立的一張圖像。只要勾選您需要的尺寸,其餘的就不會寫入

  • 含 Alpha 透明通道的 PNG 壓縮項目

    每個正方形都以 32 位元 PNG 的形式儲存在容器內,因此透明背景的標誌在每種尺寸下都保持透明,背後也不會被填上底色

  • 非正方形來源會顯示警告

    文字標誌或橫幅圖片會被拉伸以填滿正方形,該列會顯示原始尺寸,方便您回頭裁切或補邊,而不是輸出被壓扁的圖示

  • 使用 ZIP 批次轉換

    一次加入整套品牌 PNG,並以 converted-ico.zip 下載,重複的檔名會自動編號而不是被覆蓋

常見問題

把 PNG 拖放到本頁的方框中,當該列顯示「完成」時,即可從該列下載 .ico。保持勾選「圖示尺寸」選項時,檔案一加入,您的瀏覽器就會依各尺寸繪製圖像,並在本機組合成 .ico,不需要按任何按鈕。無需安裝任何軟體,也不會上傳任何檔案。

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

png to icopng to ico filepng to ico converterconvert png to icopng to ico generatorchange png to icopng to ico formatconvert png to favicon icohow to convert png to icohow to save png as icofree online png to ico converter