HTML : Favicon (2)

Favicon? Bukankah itu benda kecil yang berada di sisi kiri alamat URL di address bar pada browser kita? bagaimana kita bisa menempatkan dan memunculkan di blog kita? ok, akan kita bahas kali ini.

Masih ingat dengan postingan sebelumnya mengenai favicon di edittag? dan kali ini ceritanya menjadi semakin menarik karena ada yang mengirimkan pertanyaan mengenai favicon, bagaimana cara mendapatkannya, menerapkannya ke dalam blog dan menyeleksi hasilnya.Untuk itu saya semestinya berterimakasih kepada mas Hadi untuk hal ini.

Bila diawal saya menyebut benda kecil, ini memang ukurannya sangat mini.Hanya 16*16 pixel.Untuk membayangkan cara membuatnya juga terbilang rumit.Untunglah ada beberapa web diluar sana yang menyediakan cara membuat ico gratis untuk kita.Kita telah mengenal chami kan sebelumnya? silahkan buka dan dapatkan segera filenya.

Masih tak sempat untuk membuatnya? kita bisa cari alternatif dengan menggunakan ico yang diberikan secara gratis untuk diunduh.Coba kita buka yellowpippe.Ada banyak pilihan tersedia, tinggal pilih dan unduh sesuai keinginan.Mudah kan?

Lalu selanjutnya yang kita perlukan adalah mengupload file tersebut.Bila kita memiliki file .ico sebagai icon akan sangat sulit untuk kita yang tidak memiliki hostingan pribadi karena kebanyakan hosting gratisan tidak mendukung file berekstensi .ico untuk diupload.Beruntung bila kita memiliki rekan yang sudi untuk menyimpan file .ico untuk kita.Namun bila kita mendapatkan file lain selain .ico, misalnya : GIF,JPEG,PNG blogger pun masih mau mempersilahkan file tersebut ngendon di blog kita.(ada baiknya saya ingatkan kembali file ico bisa memiliki banyak varian ekstensi, yakni : GIF,JPEG,PNG,MNG,XBM,BMP,ICO.Hanya saja browser seperti IE hanya memperbolehkan BMP dan ICO format).

Setelah sukses menguploadnya, langkah selanjutnya adalah menambahkan tag HTML ke dalam template kita.Login ke Blogger dan buka template kita.Dan masukan tag berikut :

<link rel="Shortcut Icon" href="/favicon.ico">

anggap kita memiliki file beralamat : http://blog1.com/favicon.ico bagaimana mengedit tag diatas? tag HTML akan menjadi :

<link rel="Shortcut Icon" href="http://blog1.com/favicon.ico">

ingat untuk meletakannya diatas tag </head>.Sangat dianjurkan untuk menamakan file kita dengan nama favicon agar memudahkan browser mencari tautan yang relevan.

Waktunya dites
Setelah template kita save dan dipublish, saatnya untuk melihat hasilnya.Bila kita tidak menemukannya, coba refresh atau ketikan '?' dibelakang alamar URL,agar memaksa browser kita melihatnya sebagai halaman baru dan melupakan cache.Seperti : http://edittag.blogspot.com/?

Catatan :
Microsoft IE 6 untuk windows tidak akan menampilkan favicon sebelum kita memasukkannya ke dalam favorites.
Untuk mengecek apakah icon kita valid atau tidak, kita bisa mencoba membuka halaman ini.

Selamat mencoba.