Kembali lagi pada hari ini saya menulis tutorial cara membuat favicon untuk icon website dan blog. Sebelumnya apakah teman-teman sudah mengenal apakah itu favicon dan bagaimana penggunaanya pada website yag kita miliki. Favicon merupakan singkatan dari Favorite icon yang menyiratkan identitas suatu website yang akan muncul di bagian kiri di tab browser saat kita mengakses website tersebut. Gambar di bawah ini adalah contoh icon untuk website kelasprogrammer.com yang muncul pada tab browser saat teman-teman membukanya.
Hal ini sangat penting untuk digunakan karena merempresentasikan brand website yang kita miliki berjajar dengan brand website lain pada browser pengguna. Sehingga membuat pengguna mengenal website kita saat ia membuka beberapa tab sekaligus dalam browser nya.
Ukuran Favicon
Favicon memliki ukuran yang bervariasi namun secara proposional ukuran yang disarankan untuk icon website dan blog adalah 32×32 pixels.
Format File
File favicon memiliki format file .ico namun file jenis ini dapat kita lakukan konversi dari jenis file gambar (jpg,png) yang dapat dilakukan secara online.
Konversi Gambar ke Icon Secara Online
Ada banyak website yang menyediakan fasilitas konversi dari file gambar ke format file icon, berikut ini website yang saya rekomendasikan:
- Online ICO converter
Langkah-langkah:
- Siapkan sebuah file gambar dengan format jpg atau png
- Buka situs icoconverter.com
- Pilih file image dari direktori komputer
- Klik tombol covert
- Beberapa saat kemudian file akan ter download secara otomatis
Membuat Favicon di HTML
Pada dasarnya cara ini bisa dilakukan di website atau blog kalian cukup menyertakan sintak berikut ke dalam dokumen html antara tag <head> … </head>
<link rel="shortcut icon" href="favicon.ico">Contoh
<!DOCTYPE html>
<html>
<head>
<title>Membuat Favicon</title>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<p>Membuat Favicon oleh Kelasprogrammer.com</p>
</body>
</html>
Dapat dilihat pada contoh di atas secara sederhana kita sudah berhasil membuat icon pada website menggunakan HTML untuk mengimplementasi pada blog kalian perlu masuk ke menu edit HTML kemudian cari tag </head> menggunakan control + F maka selanjutnya tinggal memasang script favicon di dalam tag head tersebut.
Sekian artikel sederhana kali ini, semoga artikel ini dapat bermanfaat buat teman-teman semua.