Cara Membuat favicon.ico (Multi-Ukuran) Dari PNG atau SVG
Bangun favicon.ico multi-ukuran yang tajam yang berfungsi di setiap browser dan tab bar
Buat Favicon AndaFavicon adalah ikon kecil yang muncul di tab browser, bookmark, daftar riwayat, dan bilah alamat. Ini adalah salah satu elemen visual pertama yang diperhatikan pengguna tentang situs Anda, dan mendapatkannya dengan benar lebih penting daripada yang disadari sebagian besar pengembang. Favicon yang buram, hilang, atau berukuran salah membuat situs terlihat tidak selesai dan tidak profesional.
Format ICO tetap menjadi pilihan paling andal untuk favicon karena dapat menggabungkan beberapa ukuran gambar ke dalam satu file. Ketika browser memerlukan ikon 16x16 untuk tab bar, ia menarik gambar 16x16 dari file ICO. Ketika sistem operasi memerlukan ikon 32x32 untuk pintasan taskbar, ia menarik versi 32x32. Ini memastikan favicon Anda selalu terlihat tajam di setiap ukuran, daripada diskalakan naik atau turun dari resolusi tunggal.
Dalam panduan ini, Anda akan menyiapkan gambar sumber, mengonversinya ke file ICO multi-ukuran menggunakan Any2ICO, memilih ukuran favicon yang tepat, dan menambahkan tag HTML yang benar sehingga browser menemukan dan menampilkan ikon Anda. Seluruh proses memerlukan waktu kurang dari dua menit, dan konversi terjadi langsung di browser Anda.
Langkah 1: Siapkan Gambar Sumber Anda
Favicon yang hebat dimulai dengan gambar sumber yang hebat. Kualitas input Anda secara langsung menentukan kualitas output Anda, jadi layak meluangkan waktu sejenak untuk mendapatkan ini dengan benar sebelum Anda mengonversi apa pun.
Gunakan gambar persegi. Favicon selalu ditampilkan sebagai persegi, jadi sumber Anda harus persegi atau sangat dekat dengannya. Jika logo Anda lebih lebar dari tingginya, pertimbangkan untuk memotongnya menjadi porsi persegi atau menggunakan tanda yang disederhanakan daripada wordmark lengkap. Any2ICO menawarkan mode penskalaan contain dan cover jika gambar Anda tidak sempurna persegi. Contain menyesuaikan seluruh gambar di dalam persegi dengan pengisian latar belakang opsional, sementara cover menskalakan gambar untuk mengisi persegi sepenuhnya, memotong tepi.
Mulai dengan resolusi tertinggi yang tersedia. Gambar yang setidaknya 256x256 piksel memberi Any2ICO data sumber bersih untuk setiap ukuran favicon dari 16x16 hingga 256x256. Jika sumber Anda hanya 32x32, alat masih dapat membuat ukuran lebih kecil dengan downscaling, tetapi tidak dapat menghasilkan versi 256x256 yang tajam dari asli yang kecil. Jika ragu, pilih yang lebih besar.
PNG adalah format input ideal. PNG mempertahankan transparansi dan lossless, menjadikannya titik awal terbaik untuk konversi ikon. Jika logo Anda memiliki latar belakang transparan, PNG akan membawa transparansi itu ke output ICO dengan sempurna. JPG juga berfungsi, tetapi tidak mendukung transparansi dan dapat memperkenalkan artefak kompresi di sumber.
SVG berfungsi, tetapi dengan peringatan. SVG adalah format vektor yang secara teoritis dapat diskalakan ke resolusi apa pun, yang terdengar ideal untuk favicon. Any2ICO menerima file SVG dan merasterkannya selama konversi. Namun, SVG dengan referensi font eksternal, gambar yang ditautkan, atau CSS kompleks mungkin tidak dirender seperti yang diharapkan ketika dirasterkan di browser. Jika SVG Anda terlihat benar di browser web, hampir pasti akan dikonversi dengan benar.
Langkah 2: Konversi ke ICO Multi-Ukuran dengan Any2ICO
Dengan gambar sumber Anda siap, kunjungi Any2ICO untuk mengonversinya menjadi file ICO multi-ukuran yang terstruktur dengan baik. Prosesnya mudah dan hanya memerlukan beberapa klik.
Unggah gambar Anda. Seret dan lepas file PNG, SVG, JPG, WebP, GIF, BMP, atau AVIF Anda ke area konverter. Anda juga dapat menempelkan gambar langsung dari clipboard, mengimpor dari URL, atau terhubung ke Google Drive atau OneDrive. Any2ICO menerima file hingga 10 MB, yang jauh lebih dari yang seharusnya dibutuhkan sumber favicon mana pun.
Pilih ukuran ICO Anda. Any2ICO memungkinkan Anda memilih ukuran mana yang akan disematkan di file ICO: 16, 32, 48, 64, 128, dan 256 piksel. Untuk sebagian besar situs web, memilih 16, 32, dan 48 mencakup kasus penggunaan penting. Jika Anda menginginkan cakupan penuh termasuk ikon aplikasi Windows dan tampilan high-DPI, tambahkan 64, 128, dan 256 juga. Setiap ukuran yang dipilih menambahkan layer gambar terpisah di dalam file ICO tunggal.
Pilih mode penskalaan Anda. Jika sumber Anda tidak sempurna persegi, pilih contain untuk menyesuaikan gambar penuh di dalam batas persegi (dengan pengisian latar belakang untuk area kosong) atau cover untuk mengisi seluruh persegi dengan memotong. Untuk sebagian besar logo, contain adalah pilihan yang lebih aman karena mempertahankan gambar penuh tanpa memotong apa pun.
Atur latar belakang. Jika sumber Anda memiliki transparansi dan Anda ingin mempertahankannya, pilih latar belakang transparan. Jika Anda lebih suka backdrop solid, pilih putih. Latar belakang transparan terlihat paling baik di browser dan sistem operasi modern, sementara latar belakang putih dapat berguna jika logo Anda memiliki elemen yang sangat tipis atau terang yang mungkin hilang terhadap tab bar gelap.
Unduh ICO Anda. Klik tombol konversi dan unduh file favicon.ico yang dihasilkan. Konversi dilakukan oleh Canvas API langsung di browser Anda. Untuk memahami dengan tepat bagaimana Any2ICO menangani file Anda selama unggah dan impor, kunjungi halaman tentang kami.
Langkah 3: Pilih Ukuran Favicon yang Tepat
Tidak setiap ukuran sama pentingnya. Tabel di bawah ini menunjukkan ukuran favicon standar, apakah Anda harus menyertakannya, dan mengapa masing-masing penting.
| Ukuran | Sertakan? | Mengapa |
|---|---|---|
| 16x16 | Ya (penting) | Tab browser, bilah alamat, dan riwayat. Ini adalah ukuran favicon yang paling umum ditampilkan. |
| 32x32 | Ya (penting) | Pintasan taskbar Windows, tab browser pada layar high-DPI, dan ubin halaman tab baru. |
| 48x48 | Direkomendasikan | Pintasan desktop Windows dan beberapa tampilan bookmark browser. |
| 64x64 | Opsional | Ikon situs Windows dalam konteks resolusi lebih tinggi. Jarang digunakan oleh browser secara langsung. |
| 128x128 | Opsional | Ikon Chrome Web Store dan beberapa lingkungan desktop high-DPI. |
| 256x256 | Opsional | Windows Vista dan yang lebih baru untuk tampilan ikon besar. Berguna jika pengguna membuat pintasan desktop ke situs Anda. |
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.
Langkah 4: Tambahkan Tag Favicon ke Situs Anda
Setelah Anda memiliki file favicon.ico, Anda perlu menempatkannya di server Anda dan memberi tahu browser di mana menemukannya.
Tempatkan file di root domain Anda. Simpan file favicon.ico Anda ke direktori root server web Anda sehingga dapat diakses di https://domainanda.com/favicon.ico. Sebagian besar browser akan secara otomatis mencari file di jalur yang tepat ini, bahkan tanpa tag HTML apa pun yang menunjuknya. Konvensi ini berasal dari hari-hari paling awal favicon dan tetap menjadi metode paling andal.
Tambahkan tag link di HTML head Anda. Meskipun menempatkan file di root sering cukup, menambahkan tag <link> eksplisit di bagian <head> Anda memastikan bahwa setiap browser menemukannya dengan andal, termasuk yang melihat di jalur non-root atau subdomain. Berikut adalah snippet minimal yang Anda butuhkan:
<link rel="icon" href="/id/favicon.ico" sizes="any">Atribut sizes="any" memberi tahu browser bahwa file ICO berisi beberapa ukuran dan browser harus memilih yang terbaik untuk konteks saat ini. Jika Anda ingin eksplisit tentang ukuran mana yang disertakan, Anda dapat mendaftarkannya:
<link rel="icon" href="/id/favicon.ico" sizes="16x16 32x32 48x48">Untuk sebagian besar situs, versi satu baris dengan sizes="any" sangat cukup. Browser cerdas dalam memilih ukuran yang tepat dari file ICO multi-ukuran. Untuk referensi lengkap tentang tag link favicon, nilai atribut, dan kasus tepi, lihat panduan kami tentang tag HTML favicon.
Verifikasi bahwa itu berfungsi. Buka situs Anda di browser dan periksa ikon tab. Jika Anda melihat favicon lama atau tidak ada favicon sama sekali, Anda mungkin perlu menghapus cache browser Anda. Favicon di-cache secara agresif oleh setiap browser utama, jadi hard refresh (Ctrl+Shift+R atau Cmd+Shift+R) atau membuka halaman di jendela incognito adalah cara tercepat untuk mengonfirmasi ikon baru Anda dimuat dengan benar.
Ringkasan
Membuat favicon.ico multi-ukuran yang tepat adalah proses empat langkah: siapkan gambar sumber persegi berkualitas tinggi (sebaiknya PNG atau SVG pada 256x256 atau lebih besar), konversi ke ICO dengan ukuran yang tepat menggunakan Any2ICO, pilih ukuran yang sesuai dengan audiens Anda (16, 32, dan 48 minimal), dan tambahkan tag <link> sederhana ke HTML head Anda. Seluruh proses memerlukan waktu kurang dari dua menit dan menghasilkan favicon yang terlihat tajam di setiap tab browser, bilah bookmark, dan pintasan desktop.
File ICO multi-ukuran masih merupakan format favicon yang paling didukung secara universal di semua browser dan sistem operasi. Meskipun browser modern juga menerima favicon PNG dan SVG, format ICO menjamin kompatibilitas hingga ke Internet Explorer dan berfungsi mulus dengan pintasan desktop Windows. Dengan menggabungkan beberapa ukuran ke dalam satu file, Anda memastikan browser selalu memiliki resolusi yang tepat tersedia tanpa mengunduh file terpisah untuk setiap konteks.
Siap membuat favicon Anda? Kunjungi Any2ICO, unggah logo Anda, pilih ukuran Anda, dan unduh favicon.ico yang sudah jadi dalam hitungan detik. Tanpa pendaftaran, tanpa watermark, dan konversi terjadi langsung di browser Anda.