抱歉,您的瀏覽器無法訪問本站
本頁面需要瀏覽器支持(啟用)JavaScript
了解詳情 >

ico 檔是 Windows 圖示的一種專用格式,能夠包含多種尺寸的圖片,方便系統根據不同情境自動選擇適合的圖示進行顯示。本次想記錄下使用 GIMP 軟體製作 ico 檔案,並將其應用於 WPF 應用程式中,整個過程並不困難,但因為不常用,時間久了可能會忘記,所以寫下來方便未來做個參考。

前置作業

準備圖片

在使用 Windows 時,可能注意到某些軟體的圖示會根據情境顯示不同的尺寸或樣式,這是因為 ico 檔案內,包含多張不同尺寸的圖片,讓系統能根據需求自動切換顯示。

本篇示範的圖片依照 Windows 的建議,準備了 16x16、24x24、32x32、48x48 和 256x256 等尺寸。

如下圖所示(為方便顯示,將五張圖片合併在同一張圖中,實際上是五個獨立的圖片檔案)。

為了便於後續操作時辨識,每張圖片中間特意標註了尺寸數字,並使用不同的背景顏色來提升辨識度。

16x16、24x24、32x32、48x48 和 256x256 等尺寸的圖


在實際製作時,可以根據需求和實際狀況,自行選擇適合的尺寸和圖示,其他細節則可以參考文章末尾的參考資料或自行上網查詢。

使用軟體

本次使用的軟體是 GIMP,這是一款自由且開放原始碼的圖像編輯軟體。可以前往 GIMP 官網,根據自己的需求和喜好下載適合的版本。

圖示製作

準備好圖片和軟體後,就可以開始製作 ico 檔案了

  1. 打開 GIMP 軟體後,點選左上角的”檔案”,接著選擇”開啟”,選擇一張準備好的圖片開始進行製作

GIMP 中開啟圖片檔案的步驟


個人習慣選擇尺寸最大的圖片進行操作,下圖為選擇並讀取圖片後的畫面

GIMP 中開啟圖片檔案的結果


  1. 接著,再次點擊左上角的”檔案”,這次選擇”開啟成為圖層”

GIMP 中將圖片檔案開啟成為圖層的步驟


選擇其他尺寸的圖片,這邊選擇尺寸48

GIMP 選擇檔案頁面中,選擇單一圖檔


完成選擇後,畫面會顯示如下,

雖然兩張圖片在畫面中看起來是重疊的,但它們各自屬於不同的圖層

GIMP 中開啟成為圖層的結果


  1. 繼續使用”開啟成為圖層”,選擇剩下的其他尺寸圖片,可以一次選擇多張圖片

GIMP 選擇檔案頁面中,選擇複數圖檔


導入完成後,每張圖片都會位於各自的圖層中

GIMP 中開啟成為圖層,並選擇複數圖檔的結果


圖層的順序是可以調整的,個人習慣會將圖層按尺寸由小到大排列

但即使沒有按此順序排列,也不會影響最終的結果

根據各圖片的尺寸,圖層按尺寸由小到大排列


  1. 當所有圖片都導入完成後,就可以將它們匯出成 ico 檔案了,點擊左上角的”檔案”,接著按下”Export As…”

GIMP 選單中匯出功能的位置


  1. 選擇輸出的資料夾位置並設定檔案名稱,下方勾選”選擇檔案格式”後,選擇檔案格式 Microsoft Windows icon ,延伸檔名為 ico 的項目,接著按下”匯出”

匯出圖片的設定頁面


  1. 接著會跳出一個設定視窗,根據需求進行設定後,點擊”匯出”,這樣就完成 ico 檔案的製作了

匯出 ico 檔的 Details 設定頁面


完成後,可以使用 GIMP 讀取剛匯出的 ico 檔案,畫面將顯示檔案內包含的所有圖層與尺寸,

如果使用系統預設的圖片檢視器打開 ico 檔案,則只會顯示其中一張圖

GIMP 開啟 ico 檔的結果畫面


在 Windows 程式中使用

最後來看看如何在 Windows 程式專案中使用 ico 檔案,這裡以 WPF 框架為例進行示範

將製作完成的 ico 檔案複製到一個 WPF 專案中,

WPF 專案資料夾中,放入 ico 檔


打開專案屬性,找到 “Win32 資源” 區塊,將圖示設定為剛製作的 ico 檔案,並儲存設定

WPF 專案屬性,Win32 資源區塊中的圖示設定示意圖


專案屬性的 XML 配置會顯示如下圖所示的內容

WPF 專案屬性 XML 配置 ico 的結果


接著,對整個專案進行編譯

編譯完成後,前往輸出的資料夾檢查編譯出的執行檔

在檔案總管的 “詳細資料” 檢視模式下,執行檔的圖示顯示為 16x16 的尺寸

使用 ico 檔,在檔案總管的 "詳細資料" 檢視模式下的顯示結果


切換到 “中圖示” 檢視模式,圖示會變為 48x48 的尺寸

使用 ico 檔,在檔案總管的 "中圖示" 檢視模式下的顯示結果


切換到 ”大圖示” 檢視模式,圖示會顯示為 256x256 的尺寸

使用 ico 檔,在檔案總管的 "大圖示" 檢視模式下的顯示結果


啟動程式後,在應用程式視窗標題前方,顯示的是 16x16 的圖示

而在工具列中的圖示則顯示為 32x32 的尺寸

使用 ico 檔,應用程式視窗標題前方,與在工具列中的顯示結果


參考資料

評論




本站使用 Volantis 作為主題,總訪問量為