Favicon adalah logo website yang muncul di tab sebuah browser. Contoh favicon adalah:
Sudah paham kan yang dimaksud dengan favicon?
Apa fungsi favicon? Fungsi utamanya biar website lebih menarik, fungsi lainnya adalah memudahkan pengguna mengidentifikasi website kita jika yang ia buka ratusan tab. Contoh:
Itulah fungsi utamanya favicon. Bayangin kalau tidak ada favicon yang unik, kamu harus membuka satu persatu tab untuk tau tab mana yang membuka web kita.
Cara Membuat Favicon
Untuk membuat favicon siapkan gambar apapun dengan ukuran 1:1 alias persegi / kotak.
Pada umumnya favicon berukuran 16×16 px. Format favicon adalah .ico. Gunakan favicon generator dibawah ini untuk convert gambar menjadi .ico:
Supaya faviconnya jelas, siapkan gambar .JPG atau .PNG dengan ukuran paling tidak 250 x 250 piksel.
Saya kasih contoh membuat favicon dengan favicon.io.
1. Saya memilih membuat favicon dari emoji. Klik GENERATE FROM EMOJI
2. Pilih emoji yang ingin kamu convert jadi favicon. Saya memilih Grinning Squinting Face
3. Kemudian klik tombol download
4. File download format .zip jika kamu ekstrak menggunakan winrar atau sejenisnya, akan berisi file:
Mengganti Favicon HTML
Untuk mengganti favicon di web kita membutuhkan kode html:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Ingat file yang digunakan berformat .ico gunakan format yang standard saja. Bisa memang menggunakan .png atau .jpg tapi biar amannya pakai .ico ya.
href="" diisi dengan URL favicon kamu, pastikan URL ini jelas ya. Baca cara membuat hyperlink html supaya lebih jelas.
Saya akan memasukkan file belajar.html dan favicon.ico dalam satu folder.
File belajar.html isinya:
<!DOCTYPE html> <html> <head> <title>Belajar Favicon HTML</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> </head> <body> <h1>Ini contoh penggunaan favicon</h1> </body> </html>
Hasilnya menjadi:
Sekian tutorial membuat favicon di html. Silahkan berkreasi ya!