PNG ke ICO: Buat favicon.ico yang Bersih

PNG adalah titik awal paling populer untuk pembuatan favicon, dan dengan alasan yang baik. File PNG mendukung transparansi, menangani tepi tajam dengan bersih, dan merupakan format ekspor asli dari hampir setiap alat desain. Masalahnya adalah browser dan sistem operasi tidak menerima PNG secara langsung sebagai file favicon.ico. Format ICO adalah wadah khusus yang dapat menampung beberapa ukuran gambar di dalam satu file, memungkinkan sistem memilih resolusi terbaik untuk setiap konteks secara otomatis.

Dengan Any2ICO, mengonversi PNG ke ICO multi-ukuran memerlukan waktu kurang dari satu menit. Anda mengunggah gambar, memilih ukuran yang Anda butuhkan, memilih bagaimana gambar harus diskalakan dan latar belakang apa yang akan digunakan, dan mengunduh ICO yang sudah jadi. Seluruh konversi berjalan di browser Anda menggunakan Canvas API, jadi file Anda tetap di perangkat Anda dan tidak pernah diunggah ke server jarak jauh.

Panduan ini memandu Anda melalui setiap langkah proses. Anda akan belajar ukuran mana yang harus disertakan untuk favicon versus ikon desktop Windows, kapan menggunakan penskalaan contain versus cover, dan cara menangani warna latar belakang. Pada akhirnya Anda akan memiliki file ICO multi-ukuran yang profesional dan siap untuk dijatuhkan ke situs web atau aplikasi Anda.

Langkah demi Langkah: Konversi PNG ke ICO

Ikuti empat langkah ini untuk mengubah PNG apa pun menjadi file ICO multi-ukuran yang bersih.

Langkah 1 — Unggah PNG Anda

Buka konverter Any2ICO di browser modern apa pun. Seret file PNG Anda ke area unggahan, atau klik untuk menjelajahi perangkat Anda. Anda juga dapat menempelkan gambar langsung dari clipboard, memasukkan URL, atau mengimpor dari Google Drive atau OneDrive. Any2ICO menerima file PNG hingga 10 MB.

Langkah 2 — Pilih Ukuran Ikon

Pilih ukuran piksel mana yang akan disematkan di file ICO. Any2ICO menawarkan 16, 32, 48, 64, 128, dan 256 piksel. Untuk favicon situs web standar, pilih setidaknya 16, 32, dan 48. Jika ikon juga akan digunakan sebagai pintasan Windows atau ikon aplikasi, tambahkan 64, 128, dan 256 juga. Anda dapat memilih semua enam untuk kompatibilitas maksimum.

Langkah 3 — Pilih Penskalaan dan Latar Belakang

Di bawah penskalaan, pilih Contain untuk menyesuaikan seluruh gambar di dalam bingkai ikon (terbaik untuk logo dan ilustrasi) atau Cover untuk mengisi bingkai sepenuhnya, memotong tepi jika diperlukan (terbaik untuk foto dan grafis full-bleed). Kemudian atur latar belakang ke Transparan jika PNG Anda memiliki saluran alpha, atau Putih jika Anda lebih suka backdrop solid.

Langkah 4 — Konversi dan Unduh

Klik Konversi. Any2ICO menghasilkan file ICO secara instan di browser Anda. Unduh file .ico tunggal dan tempatkan di root situs web Anda sebagai favicon.ico, atau gunakan di mana pun sistem operasi Anda mengharapkan file ikon. Jika Anda mengonversi beberapa gambar, Any2ICO mengemasnya ke dalam arsip ZIP secara otomatis.

Ukuran Mana yang Harus Anda Sertakan?

Format ICO dapat menampung beberapa resolusi dalam satu file, dan setiap resolusi melayani tujuan yang berbeda. Memilih kombinasi yang tepat memastikan ikon Anda terlihat tajam di mana pun muncul.

16x16 adalah ukuran favicon klasik. Browser menampilkannya di tab, bilah alamat, dan daftar riwayat. Ini adalah ukuran minimum mutlak yang harus Anda sertakan.

32x32 digunakan oleh browser pada layar high-DPI (Retina) dan oleh Windows untuk ikon pintasan kecil. Menyertakannya bersama 16x16 mencegah browser menskalakan versi 16 piksel pada layar tajam.

48x48 muncul di taskbar Windows dan dalam konteks browser tertentu yang memerlukan ikon sedikit lebih besar. Ini melengkapi trio esensial untuk penggunaan web.

64x64, 128x128, dan 256x256 terutama relevan untuk pintasan desktop Windows, ikon aplikasi, dan lingkungan high-DPI. Jika ICO Anda hanya akan berfungsi sebagai favicon situs web, Anda dapat melewati ini untuk menjaga file tetap kecil. Jika ikon mungkin digunakan di desktop, sertakan mereka untuk tampilan terbaik.

Untuk situs web biasa, 16, 32, dan 48 adalah minimum praktis yang mencakup tab browser, bookmark, dan pintasan desktop. Jika situs Anda kemungkinan akan disematkan ke taskbar Windows atau disimpan sebagai pintasan desktop, menambahkan 64 dan 256 memastikan ikon tajam dalam konteks tersebut. Untuk pandangan lebih dalam tentang bagaimana browser memilih antara ukuran, baca panduan ukuran favicon dijelaskan kami.

Penskalaan: Contain vs Cover

Ketika PNG sumber Anda tidak sempurna persegi, atau ketika tidak cocok dengan ukuran ikon target dengan tepat, Any2ICO memerlukan aturan untuk cara menyesuaikan gambar ke dalam bingkai ikon persegi. Aturan itu adalah mode penskalaan.

Contain menskalakan gambar ke bawah sampai pas sepenuhnya di dalam bingkai ikon. Jika sumber tidak persegi, Anda akan melihat padding pada dua sisi. Mode ini menjamin bahwa tidak ada yang dipotong. Ini adalah pilihan terbaik untuk logo, wordmark, dan grafik apa pun di mana memotong tepi akan tidak dapat diterima.

Cover menskalakan gambar ke atas atau ke bawah sampai sepenuhnya mengisi bingkai ikon. Jika sumber tidak persegi, tepi yang meluap dipotong. Mode ini berguna untuk foto, tekstur, atau latar belakang full-bleed di mana Anda tidak ingin padding dan tidak ada ruang kosong.

Dalam sebagian besar alur kerja favicon, Contain adalah default yang tepat. Ikon kecil, dan memotong bahkan beberapa piksel dari logo dapat membuatnya tidak dapat dikenali. Cadangan Cover untuk kasus khusus di mana gambar sudah persegi atau di mana mengisi seluruh bingkai lebih penting daripada mempertahankan setiap tepi.

Latar Belakang: Transparan vs Putih

Pengaturan latar belakang mengontrol apa yang muncul di belakang gambar Anda ketika bingkai ikon tidak sepenuhnya tertutup — baik karena sumber memiliki saluran alpha (transparansi) atau karena penskalaan Contain menambahkan padding.

Transparan menjaga saluran alpha tetap utuh. Ikon berbaur mulus dengan permukaan apa pun yang ditempatinya, apakah itu bilah tab browser gelap, daftar bookmark terang, atau wallpaper desktop berwarna. Ini adalah pilihan standar untuk logo dan simbol.

Putih mengisi area non-gambar apa pun dengan putih solid. Ini berguna ketika PNG sumber Anda dirancang pada kanvas putih dan transparansi akan mengekspos tepi yang tidak diinginkan, atau ketika ikon akan muncul dalam konteks yang tidak mendukung transparansi dengan baik.

Sebagai aturan praktis: jika PNG Anda sudah memiliki latar belakang transparan dan terlihat bagus pada ukuran kecil, pertahankan latar belakang diatur ke Transparan. Jika desain bergantung pada surround putih atau Anda melihat artefak visual di sekitar tepi, beralih ke Putih.