IconEditor

Alur kerja · 9 menit baca

Cara membuat ikon aplikasi Windows yang bagus: panduan langkah demi langkah

Ikon aplikasi dilihat puluhan kali sehari dalam ukuran 16 piksel, dan sesekali dalam 256. Merancang untuk keduanya adalah seluruh seninya. Berikut alur kerja yang terbukti berhasil, menggunakan IconEditor.

Alur kerja

Enam langkah dari ide ke app.ico

  1. 01

    Mulai dari satu bentuk yang kuat

    Panel Ukuran ikon: 256 sampai 16 px, masing-masing dengan thumbnail, status sudah digambar, dan tempat Windows memakainya
    Daftar ukuran menampilkan semua entri berdampingan. Bentuk yang baik tetap terbaca di thumbnail 16 px.

    Pilih satu siluet yang terbaca sekilas: huruf, benda sederhana, atau lambang geometris. Hindari detail fotografis, garis tepi tipis, dan teks lebih dari dua karakter. Tanyakan pada diri sendiri: apakah saya masih mengenali ini sebagai bintik 16×16 di taskbar yang gelap?

  2. 02

    Gambar dulu yang 256×256

    Buka editor, pilih 256×256, lalu gambar versi master. Gunakan alat Garis, Persegi, dan Elips dengan diameter besar untuk geometri yang bersih, Kuas dengan kekerasan di bawah 100 untuk bayangan lembut, dan Isi untuk area datar. Tahan Shift saat menyeret persegi panjang atau elips agar tetap proporsional.

    Sisakan sekitar 8–10 % ruang kosong di sekeliling gambar. Windows tidak menambahkan margin sendiri, dan bentuk yang menempel ke tepi akan tampak sesak di samping ikon sistem.

    Mengedit kanvas 256×256 dengan alat Teks terpilih: daftar alat dan opsi teks di kiri, pratinjau langsung teks di kanvas
    Master 256×256. Daftar alat di kiri punya pintasan keyboard untuk tiap alat; panel opsi berubah mengikuti alat.
  3. 03

    Perkecil, lalu rapikan manual

    Menu Skala dari di atas kanvas yang mencantumkan ukuran yang sudah digambar dan bisa dipakai sebagai sumber
    Skala dari mencantumkan semua ukuran yang sudah digambar sebagai sumber.

    Pilih 48×48 lalu klik Skala dari 256×256 di atas kanvas. Editor mengubah skala dengan filter Lanczos, yang sudah sebaik-baiknya skala otomatis, tetapi pada 32, 24, dan terutama 16 piksel, skala otomatis selalu meninggalkan tepi yang buram. Aktifkan grid, zoom, lalu:

    • Rapatkan tepi penting ke piksel utuh dengan Pensil; garis 1 px yang jatuh di antara dua piksel tampak abu-abu dan lembek.
    • Sederhanakan: buang detail dalam, tebalkan goresan minimal 2 px pada 32 dan 1–2 px pada 16.
    • Naikkan kontras sedikit di ukuran kecil; ikon mungil tampak kehilangan saturasi.
    • Gunakan Pipet untuk mengambil warna dari versi besar agar seluruh set tetap konsisten.
  4. 04

    Periksa di setiap tampilan

    Klik Pratinjau di Windows. Dialog menampilkan ikon di taskbar gelap, di wallpaper desktop, di tampilan daftar dan ikon besar Explorer, di title bar jendela, dan di tab browser. Masalah umum yang ketahuan di sini:

    • Gambar gelap menghilang di taskbar gelap: tambahkan garis tepi terang atau bentuk dasar yang lebih terang.
    • Tepi semi-transparan menjadi keruh di atas wallpaper: perketat alpha piksel tepi pada 16 dan 24 px.
    • Teks menjadi tidak terbaca: ganti dengan bentuk pada ukuran di bawah 32 px.
    Dialog Pratinjau di Windows: ikon di taskbar, sebagai pintasan desktop, serta di tampilan daftar dan ikon besar Explorer
    Setiap mock-up memakai entri yang akan dipilih Windows: 24 px di taskbar, 16 px di tampilan daftar, 48 px di desktop.
  5. 05

    Ekspor

    Ekspor menulis satu file .ico berisi semua ukuran yang Anda pilih. Entri 256 dikompresi PNG (seperti yang diharapkan Windows sejak Vista), sedangkan yang lebih kecil adalah BMP 32-bit dengan alpha. Ukuran yang belum Anda gambar otomatis diisi dari ukuran terdekat yang lebih besar, sehingga file selalu lengkap. Anda juga bisa mengunduh ukuran yang aktif sebagai PNG, atau ZIP berisi semua ukuran untuk listing toko atau installer.

    Dialog Ekspor: tujuh kotak centang ukuran, kolom nama file, serta tombol Unduh .ICO, PNG, dan ZIP
  6. 06

    Pasang di aplikasi Anda

    Dialog ekspor menyertakan cuplikan kode yang siap disalin:

    Tab cuplikan kode di dialog Ekspor (C/C++ .rc, .NET .csproj, Electron, Tauri, favicon Web) dengan contoh .rc ditampilkan
    • C / C++: pernyataan ICON di file .rc Anda; resource ikon dengan nomor terendah menjadi ikon executable.
    • .NET: <ApplicationIcon> di .csproj, ditambah Icon="…" pada window WPF.
    • Electron: build.win.icon untuk electron-builder dan opsi icon pada BrowserWindow.
    • Tauri: bundle.icon di tauri.conf.json.

    Setelah mengganti ikon, Windows kadang masih menampilkan ikon lama dari cache ikonnya. Membangun ulang executable dengan ukuran file yang berbeda, atau membersihkan cache (ie4uinit.exe -show), akan mengatasinya.

Hindari

Kesalahan umum

Empat hal yang membuat ikon yang sebenarnya bagus tampak salah di suatu tempat di Windows.

  • PNG yang hanya diganti namanya jadi .ico

    Merilis satu PNG 256 px yang namanya diganti menjadi .ico. Di beberapa tempat berhasil, di tempat lain tampak buram.

  • Tidak ada 16 dan 24 px

    Tampilan daftar Explorer dan mode kecil taskbar terus memakainya. Kalau terlewat, hasilnya adalah perkecilan yang buram persis di tempat orang paling sering melihat.

  • Gradasi di seluruh ikon

    Gradasi berubah menjadi noda di 16 px. Pakai gradasi hanya di area besar, dan ratakan di ukuran kecil.

  • Bayangan yang ikut tergambar

    Windows menempelkan ikon di berbagai latar; bayangan yang sudah tergambar akan tampak salah di sebagian besar latar itu.

Lanjut membaca

Lebih lanjut tentang ikon Windows

Referensi · 6 mnt Daftar ukuran ikon Windows Semua tempat Windows menampilkan ikon, dan ukuran mana yang dipilihnya. Langkah demi langkah · 8 mnt Ganti ikon di Windows 11 dan 10 Ikon folder, pintasan, desktop, dan drive dengan .ico Anda sendiri. Bantuan Pertanyaan yang sering diajukan Transparansi, isi file ICO, dukungan browser, privasi.

Coba langsung sambil membaca

Editor ini gratis, tanpa akun, dan mengekspor file .ico siap pakai untuk Windows dengan ketujuh ukuran.

Buka editor