Selasa, 29 Desember 2009


Blogger.com (blogspot.com) memberikan kebebasan kepada para bloggernya untuk mengubah faviconnya masing-masing. Lihat perbandingan dua gambar berikut.

Yang sebelah kiri adalah favicon default di blogspot dan yang sebelah kanan adalah favicon modifikasiku. Bikinnya gampang kok. Saya akan tunjukkan kepada anda sekalian bagaimana mengganti favicon blogspot:
  1. Persiapkan gambar untuk favicon. Anda bisa menggunakan editor gambar kesukaan untuk berkreasi. Saya menggunakan Adobe Photoshop.
  2. Ukuran icon yang saya buat adalah 27 x 20 pixel. Menurut saya ukuran maksimal untuk tinggi icon agar terlihat proporsional adalah 30 pixel.
  3. Simpan dengan ekstensi gif (File, Save As, File Type : gif). Ekstensi untuk favicon sebenarnya bisa dibuat dalam ekstensi gif, ico dan png. Saya pilih gif karena lebih mudah pembuatannya dan ukurannya relatif kecil, juga bisa dibuat beranimasi (tidak saya bahas sekarang)
  4. Upload gambar ke ImageShack, Flickr atau dari Picasa dan dapatkan link direct downloadnya. Contoh yang saya pakai ada di https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif

    Updated - 23 Mei 2011 : Anda dapat mengupload file favicon ke
    1. http://www.iconj.com/favicon_hosting.php
    2. http://www.picpanda.com
    3. http://www.fileden.com
    4. http://mirrorimg.net
    5. http://www.imageboo.com
  5. Login ke Dashboard blogspot anda, masuk ke menu Layout, Edit HTML
  6. Tekan CTRL+F, masukkan kata: </head>, letakkan kursor anda sebelum tanda </head> tersebut
  7. Selipkan syntax berikut :
    <link href='https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif' rel='shortcut icon'/> (NB: Ganti alamat https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif sesuai alamat icon anda di ImageShack)
  8. Save Template dan lihat perubahan yang terjadi (View Blog) - Selesai
Silahkan dicoba. Beri tahu saya hasil yang anda buat.

--------------------- Update (10 Feb 2010) --------------------
Untuk memaksa browser menampilkan favicon diatas, anda dapat menambahkan kode:
<link href='https://lh5.googleusercontent.com/_FtoG3i98AJw/TYBcbQRz6BI/AAAAAAAAAXM/LxVV46JcFFs/s512/icon3c.gif' type='image/gif' rel='icon' />
Tepat dibawah kode point no. 7.

Favicon dengan tipe file gif bisa muncul dengan baik di browser firefox, namun tidak tampak di IE. Untuk memastikan setiap icon muncul dengan konsisten, tipe file harus .ico. Silahkan kunjungi http://www.html-kit.com/favicon/ untuk membuat file .ico gratis!
Semoga bermanfaat.

Ingin cara yang lebih mudah lagi? baca disini

Penyedia Jasa Pembuatan Website, Blog, Aplikasi berbasis Web - Murah dan Bergaransi Seumur Hidup

75 komentar:

  1. Keren bang heri...
    saya suka :D
    hehehehe

    btw blogwalking k tmpt ane ya gan :D

    BalasHapus
  2. terima kasih akirawisnu.

    saya seneng2 aja blogwalking ke tempat akirawisnu, tapi alamatnya mana ya?

    BalasHapus
  3. wah!! bang hery

    ini linknya : http://akirawisnu.blogspot.com/

    makasii buat inponya loh gan :D, ud saia coba dan SUKSES :D

    makaisi yaaa.. :D

    BalasHapus
  4. bang hery,, upload file ico kmana y??? saya sudaha coba pke jpg dan berhasil, namun beberapa browser g mw tmpil

    BalasHapus
  5. sonic42, upload file ico atau jpg diarahkan ke server yang mendukung akses publik seperti imageshack, picasa atau flickr.

    File favicon berformat jpg atau gif memang terlihat muncul di firefox namun dalam beberapa kasus tidak kelihatan di IE dan chrome. Jadi memang langkah amannya adalah menggunakan file format ico

    BalasHapus
  6. Makasih gan, sangat membantu....

    BalasHapus
  7. berkali-kali nyoba tetap gak bisa...untung ktemu bloghery info, favicon saya sudah bisa muncul. thanks tipsnya.

    BalasHapus
  8. selamat drhyudi, senang bisa membantu anda..
    btw dimana alamat blog anda, saya juga ingin lihat kalo dibolehkan ;)

    BalasHapus
  9. wah, terimakasih Om. sedikit menantang mengenai ekstensi file, hehehe, salam kenal ya, dari barala go blog. masih Balita Om.

    BalasHapus
  10. Salam kenal kembali mas alfan. Senang bisa membantu :)

    BalasHapus
  11. thank's mas alfan, sdh di coba siiiiiplah...

    BalasHapus
  12. hehehe.. nama saya hery, mas... bukan alfan :)

    BalasHapus
  13. nuhun pisan ahh.. :)
    tukeran link yu?? he
    http://informasiterhangat.blogspot.com

    BalasHapus
  14. Thank'z brother . . .
    Kunjungi yawh . . . http://downloadsoftwarebro.com

    BalasHapus
  15. Nuhun Pisan cuy
    (makasih Banyak ya)

    BalasHapus
  16. makasih gan. inponya berguna banet, kebetulan w lg nyari yang ginian

    BalasHapus
  17. waduh keren abis artikelnya jelas dan padat dan mudah di mengerti. saya sudah mencobanya tpi tidak terlihat di google chrome. mungkin sudah ke ganti. thank you postingnya

    BalasHapus
  18. Terima Kasih infonya. sudah saya coba dan berhasil.
    http://partalearning.blogspot.com/

    BalasHapus
  19. bang hery q udh coba,,
    sma smua udah langkahY tp ga bisa2 knpa ya..

    BalasHapus
  20. Ok Thank.... langsung praktek...

    BalasHapus
  21. joz bang... http://xspeedboy.blogspot.com

    BalasHapus
  22. coba ikuti langkah2 diatas secara teliti - soalnya aku lihat kode untuk menampilkan favicon (langkah ke-7) tidak terdapat di dalam kode HTML blog anda

    BalasHapus
  23. bang, yang ditulis Link, Direct Link, wigdet code, forum code, HTML code , Alt forum Kode.

    BalasHapus
  24. bisa minta tolong di printscreen ga hasil nya ??

    BalasHapus
  25. thanks bro.........salam kenal http://www.komputertutorial.com/

    BalasHapus
  26. Aku tertarik cara membuat ini dan langsung action ya

    BalasHapus
  27. saya uwd nyoba instruksiny
    tp kok g bs..???

    BalasHapus
  28. bung ryu hanya kurang beruntung. Coba lebih teliti mengikuti langkah-langkah ini. Sudah banyak yang berhasil kok :)

    BalasHapus
  29. semangat... saya sudah berhasil bang http://murahcertain.blogspot.com/

    BalasHapus
  30. ayatulhusnarahmafamira15 Mei 2011 pukul 00.47

    makasih bro.....

    BalasHapus
  31. thank bung

    BalasHapus
  32. Altair ibn Abdi Robhani1 Juni 2011 pukul 22.44

     Trimakasih buat infonya:)
    Sungguh bermanfaat, akan saya coba.

    Btw, blognya udah sya follow
    Kami tunggu Follbacknya....

    Salam spirit dari Dayat's Artikel

    BalasHapus
  33. www.kolom-opini.co.cc4 Juni 2011 pukul 14.34

    n..nice info..Sudah sukses ane taro di TKP...Klo sempat mampir ke TKP gan..udah ane siapin karpet merah buat agan..

    BalasHapus
  34. mantap gan, sudah kunjungan balik :)

    BalasHapus
  35. maksih y bg ....  :)

    BalasHapus
  36. Makasih infonya kk Herry

    BalasHapus
  37. visit my blog
    jimz-blogs.blogspot.com

    BalasHapus
  38. ZIEYA_OCKTARIANI14 Juli 2011 pukul 07.55

    kok g bisa
    udh berapa kali pi g KTIFF bbm AKU
    :(

    BalasHapus
  39. lumayan susah

    BalasHapus
  40. thanks gan.... favicon muncul dengan sempurna :))
    kunjungi blog saya ya
    http://mengapatakmencoba.blogspot.com

    BalasHapus
  41. thanks gan atas info x

    BalasHapus
  42. ikutan naroh link ya

    http://zieteru.blogspot.com/ 

    BalasHapus
  43. makasih mas informasinya....
    sangat2 bermanfaat!!!!!!

    BalasHapus
  44. Kak, kok saya gak bisa ya ?

    ini blog saya Hendriktok.blogspot.com

    BalasHapus
  45.  sudah sukses kok, coba dibersihin dulu cache browsernya :)

    selamat ya

    BalasHapus
  46. thank gan infonya....

    BalasHapus
  47. cara dapet 
    link direct downloadnya gmn mas

    BalasHapus
  48. siiippppp........
    thankz

    BalasHapus
  49. gan mnta tutorialNya buat bikin itu tu. yang ada burung muter-muter di halaman plisss. tolong bgt gan <<<<

    BalasHapus
  50. Mantab brow, terima kasih banyak...

    BalasHapus
  51. bang saya masih bingun , boleh minta nomor hpnya ga ?? sms aja ke 089654262717

    BalasHapus
  52. makasih mas...sukses sya coba
    http://sayadankaligrafi.blogspot.com/

    BalasHapus
  53. kursor arahkan ke gambar -> klik kanan plih copy image location -> paste di tmpt pnyimpnan word/document...

    BalasHapus
  54. thx infonya visit http://realeffingdeal-ind.blogspot.com/

    BalasHapus

Komentar Anda..?

Related Posts Plugin for WordPress, Blogger...
Langganan RSS Feed Follow me on Twitter!