Pasang Icon Web di Blogspot, Joomla, Wordpress dll

Memasang icon (favicon=favorites icon/website icon, shortcut icon, url icon, atau bookmark icon) merupakan hal yang menarik bagi para sebagian webdesigner dan blogger, karena dengan adanya favicon pada website akan memberikan nilai estetika web yang khas.

Nuansa tema dari template (themes) berpadu dengan logo website/perusahaan memberikan identitas yang unik menjadikan web untuk mudah diingat bagi para pengunjung web. Websitepun menjadi lebih menawan bila pengunjung mem-bookmark website kita. Membuat favicon memiliki tantangan tersendiri bagi sebagian kalangan designer,, betapa tidak? dengan ukuran yang hanya 16x16 pixel ini para webdesigner dituntut untuk kreatif dalam mengekspresikan suatu logo website yang unik (berbeda dengan yang lain) dan tampil menawan.

Langkah yang paling pertama adalah menyiapkan dulu sebuah image yang akan dijadikan favicon, bisa foto maupun image lain bahkan animasi gif pun bisa dijadikan favicon. Jika kesulitan dalam membuat image 16x16 pixel banyak penyedia layanan online pembuatan favicon ini. berikut daftarnya:
http://tools.dynamicdrive.com/favicon/
http://graphicsguru.com/favicon.php
http://genfavicon.com/
http://favicongenerator.com/
http://favicon.cc/
http://antifavicon.com/

Blogger/Blogspot

Caranya sangatlah mudah, kita hanya perlu menyiapkan gambar ikon yang akan dijadikan icon web yang akan kita pasangi tersebut. Khusus untuk blogger/blogspot gunakan teknik menimpa icon bawaan blogger dengan image format png 16x16 pixel. Karena jika hanya menggunakan teknik biasa ikonnya sering tidak muncul karena tertimpa icon bawaan. Untuk blogspot berikut kode scriptnya:

<link href='http://lokasi-gambar.com/nama-gambar.png' rel='shortcut icon'/>

pasangnya tepat berada di atas kode di </head> pada design mode html template kita supaya bisa menimpa ikon bawaannya. Jangan lupa untuk mengganti text warna orange diatas dengan url lokasi favicon png yang dikehendaki berada.

Bagaimana dengan memasang ikon di website selain blogspot? seperti joomla, drupal, wordpress.com maupun worpress dengan selfhosting dan yang lainnya?

Joomla, Drupal

Oke,, pada prinsipnya adalah sama, yakni upload image kecil berukuran 16x16 pixel dengan kedalaman warna maksimal 256 color (gambar paling kompatibel adalah yang berformat .ico meski format lain juga kini sudah mulai banyak dikenali browser keluaran baru). kemudian tempatkan skrip/kode pemanggilan favicon tersebut di dalam bagian head. Jadi untuk joomla dan drupal dan lain-lain secara default telah terdapat favicon bawaan yakni berupa logo masing-masing cms tersebut. Tekniknya adalah dengan menimpa file aslinya berupa file ikon berekstensi ico (ini cara paling mudahnya) atau bisa membuat file baru di dalam direktori file ico asli berada. CMS joomla default favicon-nya berada di dalam folder /images. Jika tekniknya adalah menimpa kita tidak perlu mengganti skrip code pemanggilan favicon pada header themes. lain halnya kalau kita buat baru tanpa menimpa favicon.ico aslinya maka perlu penyesuaian dengan nama favicon.ico yang baru.

Wordpress.com

Pemasangan favicon di worpress.com beda lagi, kita tahu bahwa wordpress.com tidak memperbolehkan user versi gratis dalam mengedit css apalagi sampai insert javascript segala termasuk skrip kode yang hanya memanggil favicon. Namun bagi yang ngebet banget pasang favicon di blog gratis wordpress.com, ada solusi dengan menggunakan blavatar (sebutan faviconnya wordpress). Adalah blog image dimana ini juga berfungsi sebagai favicon yang berlaku pada wordpress. Pasangnya cukup mudah yakni log-in worpress, di Setting>General>Blog Pictures, klik browse untuk mencari gambar yang mau diupload sebagai favicon, klik upload dan terakhir crop sesuai keinginan jika mau di crop, selesai.

Berikut beberapa variasi teknik penulisan script berkaitan dengan favicon :

<link rel=”shortcut icon” href=”http://lokasi-gambar.com/nama-gambar.png”/>

Sebagai catatan tambahan umumnya beberapa browser menyimpan beberapa data di memory cache akan halaman yang sedang dibuka. Sering favicon tidak tampil sesaat setelah dipasang favicon, supaya bisa langsung nampak refresh/reload halaman beberapa kali, bila perlu bersihkan cookies-cookies halaman web terkait yang lama.