File favicon yang dibutuhkan situs web beserta ukurannya

Situs web membutuhkan sejumlah kecil file ikon, dan sebagian besar keputusannya menyangkut ukuran. Letakkan favicon.ico dengan gambar 16, 32, dan 48 piksel di folder utama situs untuk tab peramban dan Windows. Tambahkan Apple touch icon 180 piksel untuk layar utama iPhone dan iPad, serta ikon PNG 192 dan 512 piksel yang tercantum dalam manifest aplikasi web. Pembuat favicon membuat semuanya dari satu logo dan menulis baris HTML yang tinggal Anda tempelkan ke halaman.

File dan ukurannya

ZIP yang diunduh dari pembuat favicon berisi ketujuh file tersebut. File favicon.ico dibuat dari tiga gambar PNG berukuran 16, 32, dan 48 piksel, yang disimpan dalam satu file. Setiap ikon adalah logo yang sama dengan ukuran lebih kecil. Pembuat favicon bekerja dari versi gambar Anda berukuran 512 piksel dan membuat setiap ukuran darinya.

Baris HTML

Pembuat favicon menulis empat baris untuk bagian head halaman Anda:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Baris pertama menunjuk ke favicon.ico dan menyatakannya berukuran 48 x 48. Baris kedua memuat PNG 32 piksel. Baris ketiga menyebutkan Apple touch icon, dan baris keempat menunjuk ke manifest, tempat ikon 192 dan 512 piksel tercantum. PNG 16 piksel ada di dalam ZIP tetapi tidak ada di baris-baris ini. Peramban juga mencari /favicon.ico sendiri, sehingga file tetap ditemukan meski baris pertama tidak ada. Biarkan jalurnya seperti tertulis, kecuali file Anda disimpan di lokasi lain.

Mengapa ukuran kecil membutuhkan bentuk sederhana

Pada 16 x 16 piksel, sebuah ikon hanya punya 256 piksel. Ikon 48 piksel punya 2.304, dan sumber 512 piksel punya 262.144. Sebagian besar detail logo hilang saat diperkecil hingga 16 piksel, sehingga garis tipis atau kata kecil menjadi kabur. Gunakan tanda yang sederhana, atau satu-dua huruf dengan kontras kuat.

Opsi huruf menerima satu atau dua karakter dan menggambarnya besar di tengah ikon, lalu memperkecilnya jika terlalu lebar. Bentuknya adalah Persegi, Membulat, dan Lingkaran. Pratinjau menampilkan hasil ukuran 16, 32, 48, 180, dan 512 piksel secara berdampingan, serta tab terang dan gelap, sehingga Anda bisa menilai ukuran kecil sebelum mengunduh. Pratinjau diperbarui setiap kali Anda mengubah bentuk, jarak tepi, atau latar belakang, jadi Anda bisa mencoba setiap pengaturan terlebih dahulu.

Jarak tepi, latar belakang, dan ikon Apple

Jarak tepi memiliki tiga pilihan: Tanpa jarak, Kecil, dan Besar. Kecil menyisakan 10 persen ruang kosong di setiap sisi ikon, dan Besar menyisakan 20 persen. Dalam mode gambar, Tanpa jarak memotong gambar menjadi persegi di tengahnya, sehingga ujung logo yang lebar hilang. Pengaturan dengan jarak tepi justru memuat seluruh gambar di dalam persegi.

Pilihan latar belakang adalah Transparan, Putih, dan Kustom, dengan Transparan sebagai default. Apple touch icon selalu buram. Dalam mode gambar, area transparannya diisi warna latar yang dipilih, atau putih jika latar belakangnya Transparan. Dalam mode huruf, area tersebut diisi warna latar huruf. Area transparan pada Apple touch icon bisa tampil hitam di iPhone dan iPad, karena itu pembuat favicon mengisinya. Ukuran lain tetap mempertahankan transparansi yang Anda pilih. Mengapa PNG transparan menjadi hitam menjelaskan penyebabnya.

Favicon berbentuk persegi, sehingga logo yang lebar memerlukan bingkai persegi lebih dulu. Pembuat foto persegi memuat seluruh gambar ke dalam bingkai 1:1, dengan tepi kabur, putih, hitam, atau kustom, sehingga tidak ada bagian yang terpotong. Ubah ukuran gambar mengatur piksel secara tepat. Dengan Pertahankan proporsi aktif dan kedua sisi terisi, gambar masuk ke dalam kotak tanpa distorsi. Rasio aspek foto dijelaskan membahas bentuk-bentuk yang umum dipakai.

Perubahan yang butuh waktu untuk tampil

Peramban menyimpan favicon dalam cache. File yang diubah di alamat yang sama bisa terus menampilkan ikon lama untuk beberapa waktu, sehingga muat ulang biasa sering tidak cukup. Buka alamat ikon secara langsung untuk memastikan file baru sudah ada di server, lalu muat ulang halaman dengan melewati cache. Jika ikon lama masih muncul, beri file baru nama yang berbeda dan perbarui tautan agar mengarah ke file tersebut.

Cara menggunakannya di fixmint

1. Pilih Gambar lalu letakkan logo Anda di kotak, atau pilih Huruf lalu ketik satu atau dua karakter.
2. Atur Jarak tepi ke Tanpa, Kecil, atau Besar, dan Latar belakang ke Transparan, Putih, atau warna Kustom.
3. Periksa ikon 16, 32, dan 48 px pada tab terang dan gelap, serta pratinjau 180 dan 512 px.
4. Tekan Unduh ZIP untuk ketujuh file, atau Unduh favicon.ico untuk file itu saja.
5. Tekan Salin HTML dan tempelkan baris dari HTML untuk head Anda ke bagian head setiap halaman.

Kasus khusus

• Gambar Anda tetap berada di perangkat Anda. Pembuat favicon membuat ikon di peramban Anda, dan tidak ada yang diunggah.
• Huruf dua karakter. Dua karakter diterima dan digambar lebih kecil agar keduanya muat. Hasilnya lebih sulit dibaca pada 16 piksel dibandingkan satu huruf.
• Nama file. Pertahankan nama yang dipakai HTML, karena tautannya mengarah ke nama tersebut.
• File yang tidak bisa dibaca. Jika gambar tidak dapat diubah menjadi ikon, pembuat favicon menampilkan pesan "Ikon tidak dapat dibuat dari masukan ini. Coba gambar lain." dan mengosongkan hasilnya. Coba file lain, atau simpan ulang gambar dalam format yang umum.