Konversi PNG ke ICO untuk favicon yang tajam
Favicon adalah gambar kecil yang memberikan tanda visual unik pada sebuah situs web. Anda melihatnya di tab browser di samping judul halaman, di daftar bookmark Anda, di dropdown bilah alamat riwayat penjelajahan Anda, dan kadang-kadang di samping hasil pencarian. Ukurannya kecil, tetapi melakukan banyak pekerjaan: favicon yang dapat dikenali membantu pengguna menemukan tab Anda di antara selusin tab lainnya dan menandakan bahwa sebuah situs selesai dan terawat. Format klasik untuk ikon kecil tersebut adalah ICO, dan cara termudah untuk membuatnya adalah mulai dari PNG kotak yang bersih dan mengkonversinya.
Alat ini mengambil gambar PNG dan mengubahnya menjadi favicon ICO langsung di browser Anda. Konversi berjalan secara lokal menggunakan perangkat Anda sendiri, sehingga gambar yang Anda pilih tidak pernah diunggah ke server. Itu penting saat ikon Anda adalah logo atau aset merek yang lebih baik tidak Anda serahkan ke pihak ketiga. Saat file siap, Anda cukup mengunduhnya.
Apa itu format ICO dan mengapa menyimpan beberapa ukuran
ICO adalah format wadah ikon yang berasal dari Microsoft Windows, tempat format ini menyimpan ikon yang digunakan untuk program, pintasan, dan folder. Fitur khasnya — dan alasan mengapa ia menjadi standar untuk favicon web — adalah bahwa satu file ICO dapat menyimpan gambar yang sama pada beberapa resolusi sekaligus. Alih-alih satu bitmap tetap, file ini mengemas sekumpulan gambar kotak kecil dan membiarkan browser atau sistem operasi memilih ukuran yang sesuai dengan tempat ia perlu menggambar ikon.
Itu sungguh berguna. Tab browser memerlukan ikon yang sangat kecil, bilah bookmark mungkin menggunakan yang sedikit lebih besar, dan pintasan yang disematkan di desktop dapat meminta sesuatu yang lebih besar lagi. Dengan ICO multi-ukuran, setiap konteks mengambil versi yang sesuai, sehingga ikon Anda tetap tajam daripada diskalakan dari satu bitmap kecil dan menjadi buram. ICO juga mempertahankan transparansi, yang menjaga sudut logo bulat atau tidak beraturan tetap bersih terhadap warna tab apa pun.
Ukuran favicon yang direkomendasikan
Untuk favicon situs web, tiga ukuran yang layak disertakan adalah 16x16, 32x32, dan 48x48 piksel. Versi 16 piksel adalah yang ditampilkan kebanyakan browser di tab dan bilah alamat. Versi 32 piksel digunakan pada layar resolusi lebih tinggi dan di beberapa tampilan bookmark dan riwayat, sehingga menjaga hal-hal tetap tajam di layar modern. Versi 48 piksel mencakup konteks yang lebih besar seperti pintasan situs Windows. Karena semuanya ada di dalam satu file ICO, Anda mengirimkan satu aset dan membiarkan setiap permukaan memilih apa yang dibutuhkan.
Mulailah dari PNG kotak agar tidak ada yang diregangkan. Jika gambar sumber Anda persegi panjang atau terlalu besar, potong atau skalakan menjadi kotak yang bersih terlebih dahulu dengan pengubah ukuran gambar kami, kemudian jalankan konversi. Desain yang sederhana dan kontras tinggi jauh lebih terbaca pada 16 piksel daripada ilustrasi detail, jadi utamakan bentuk tebal daripada teks halus.
Cara menambahkan favicon ke situs Anda
Setelah Anda memiliki file ICO, unggah ke situs web Anda, secara tradisional ke root situs sebagai favicon.ico. Banyak browser akan menemukannya secara otomatis, tetapi praktik terbaik adalah mendeklarasikannya secara eksplisit di head HTML Anda agar tidak ada tebak-tebakan. Tambahkan tag link seperti ini:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Tempatkan baris itu di dalam bagian <head> halaman Anda. Atribut rel="icon" memberi tahu browser bahwa sumber daya ini adalah ikon halaman, dan href menunjuk ke tempat Anda menyimpan file. Jika Anda menggunakan jalur relatif root seperti yang di atas, deklarasi yang sama berfungsi di setiap halaman situs Anda. Setelah menerapkan, Anda mungkin perlu melakukan hard refresh atau menghapus cache sebelum ikon baru muncul, karena browser menyimpan favicon dengan agresif.
Konversi privat di browser Anda
Semuanya terjadi di perangkat Anda. PNG yang Anda pilih dibaca, didekode, dan dikode ulang sebagai ICO secara lokal, dan tidak ada yang meninggalkan mesin Anda selama proses berlangsung. Tidak ada akun, tidak ada antrean, dan tidak ada penyimpanan sisi server, yang membuat ini nyaman bahkan untuk logo yang belum dirilis atau pekerjaan klien di bawah perjanjian. Untuk lebih banyak cara mempersiapkan dan merapikan grafik, telusuri selengkapnya di alat gambar kami.
Pertanyaan yang sering diajukan
Apakah gambar saya diunggah ke suatu tempat?
Tidak. PNG dikonversi ke ICO sepenuhnya di browser Anda di perangkat Anda sendiri. Tidak ada yang dikirim ke server dan tidak ada yang disimpan, sehingga gambar Anda tetap privat.
Ukuran apa yang harus disertakan dalam favicon saya?
Ukuran yang paling berguna adalah 16x16, 32x32, dan 48x48 piksel. Gambar 16 piksel ditampilkan di tab browser, sementara yang lebih besar menjaga ikon tetap tajam di layar resolusi tinggi dan pintasan desktop.
Mengapa menggunakan ICO alih-alih hanya PNG?
ICO adalah format favicon yang sudah lama ada dan dapat menyimpan beberapa ukuran di dalam satu file. Browser dan sistem operasi memilih resolusi yang sesuai dengan setiap konteks, sehingga ikon tetap tajam daripada diskalakan dari satu bitmap.
Apakah ICO mempertahankan transparansi dari PNG saya?
Ya. Format ICO mendukung transparansi, sehingga area transparan dari PNG Anda dipertahankan dan ikon berbaur dengan bersih dengan warna tab atau latar belakang apa pun.
Bagaimana cara menambahkan favicon ke situs web saya?
Unggah file ICO ke situs Anda, biasanya sebagai favicon.ico di root, dan tambahkan tag link di head HTML Anda seperti link rel icon type image x-icon href slash favicon.ico. Kemudian hapus cache browser Anda untuk melihatnya.
Gambar sumber saya tidak kotak. Apa yang harus saya lakukan?
Potong atau skalakan menjadi kotak terlebih dahulu agar tidak diregangkan. Anda dapat menggunakan pengubah ukuran gambar kami untuk membuat kotak yang bersih, kemudian konversi itu ke ICO untuk favicon yang paling bagus.