Wednesday, September 16, 2009

Cara memasang Favicon pada Blogger

Favicon singkatan dari Favorite Icon, dikenal juga sebagai Bookmark Icon, Shortcut Icon, atau Website Icon. Favicon adalah sebuah icon yang berukuran 16 x 16 pixels yang terletak di samping kiri area pada address bar, icon tersebut juga ditemukan disamping judul website pada tab dan bookmarks. Meletakkan favicon pada website atau blog anda dapat membuat pembaca mengenal situs anda lebih mudah dari antara jutaan situs.


Ada banyak situs yang dapat membantu anda untuk membuat favicon secara gratis, salah satunya yang saya pernah gunakan adalah http://www.html-kit.com/favicon/ ketika anda upload gambar anda ke website- website penyedia jasa pembuat favicon tersebut, gambar anda akan diperkecil ke ukuran 16 x 16 pixels secara otomatis dan anda akan diberikan 2 buah favicon, yang satu adalah animated favicon (favicon dengan icon yang dapat bergerak- gerak) dan yang satu lagi favicon gambar biasa. Sebenarnya anda juga bisa menciptakan favicon sendiri dengan bantuan software manipulasi gambar seperti Photoshop atau Gimp hanya dengan memilih dimensi yang berukuran 16 x 16 pixel. Masih banyak lagi situs bagus yang ditawarkan untuk membantu membuat favicon dengan kelebihan masing- masing, hanya saja saya tidak ada waktu untuk menjelajahi itu semua.

Untuk memasang favicon pada website anda:
  • Anda bisa upload gambar favicon ke external web host seperti Photobucket atau Google Picasa album yang dibuat otomatis untuk tiap pemilik account Blogger saat anda meng-upload gambar di blogger anda. Login ke Picasa photo album dan klik tombol upload. Ketika gambar favicon anda sudah terkirim, copy URL gambar tersebut dengan cara klik “Link to this photo” di bagian kanan halaman. Untuk copy URL gambar anda di Picasa, anda juga bisa melakukannya dengan klik- kanan gambar tersebut dan pilih “Copy Image Location”.
  • Login ke account Blogger anda dan dari dashboard klik Layout setelah itu Edit HTML.
  • Backup template anda sebelum melakukan perubahan, klik “Full Download Template” dan simpan di komputer anda.
  • Cari kode dibawah ini:

    </head>
  • Diatas kode tersebut sisipkan kode dibawah ini (atau di antara <head> dan </head> tag):

    <link rel="shortcut icon" href="URL-Gambar-Favicon-Anda" >

    atau

    <link href='URL-Gambar-Favicon-Anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
  • Ganti tulisan teks merah diatas dengan URL gambar favicon anda. Ketika selesai melakukannya, kodenya akan terlihat seperti di bawah ini (aku ambil milikku sebagai contoh):

    <link href='http://lh6.ggpht.com/_9Jx2mcxSPVU/Su-zgL4iP0I/AAAAAAAAA9s/6X9yHgwaUGk/animated_favicon1.gif' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    </head>
  • Save settingan anda dan test.
Kalau favicon anda tidak muncul, bersihkan file cache browser anda dan restart browsernya, setelah itu lakukan lagi.



6 comments:

  1. good.... thanks... berkat kamu, aku jadi punya favicon di blog ku. aku lihat di blog-blog lain gak jelas. ini yang paling jelas. thanks.. bro.. :) oh ya, lihat blog ku ya. di www.bermainrubik.blogspot.com itu bagaimana cara main rubik 3x3.. :)

    ReplyDelete
  2. Thanx gan untuk tutorialnya :)

    ReplyDelete
  3. Thanks infonya,saya telah coba praktekkan tapi saya gagal krn kurang bisa/ada kendala untuk upload faviconnya dan tak menemukan letak penempatan favicon pada edit html.Tapi tak apalah.. nanti mohon direferensikan lagi jika ada hal/info baru,oya coba simak info di http://www.matapulsa.com/?id=OB11004300

    ReplyDelete
  4. Tanks atas infonya ...sangat bermanpaat...

    ReplyDelete