Cara Membuat dan Mengganti Favicon di Blog



Pada kesempatan kali kita akan mempelajari cara membuat dan mengganti favicon di blog. Favicon adalah sebuah icon, logo, atau gambar kecil yang muncul pada menu tab browser dan juga terletak di sebelah kiri address bar browser tertentu. Favicon ini muncul pada browser Opera dan Mozilla Firefox, Konqueror, Safari, Google Chrome, dll, serta tidak untuk Internet Explorer versi 6 ke bawah.

Format file favicon biasanya berupa file dengan ekstensi ico, namun sebenarnya gambar dengan format gif, jpg, png pun bisa digunakan sebagai favicon di blog.

Fungsi utama favicon adalah sebagai suatu logo dari website, situs, atau blog. Bahkan tak jarang sebuah website atau blog terkenal lantaran memiliki favicon yang unik sebagai indentitas yang unik dari milyaran website yang ada di jagad maya.
Diambil dari Prigad.com
Saya rasa Anda sudah mengerti dan tidak perlu lagi menggunakan demo, dari gambar di atas saja sobat bisa sudah menebaknya kan.

Untuk membuat dan menggantinya Anda dapat mengikuti tutorial berikut di bawah ini:

Membuat Favicon
Pertama anda persiapkan terlebih dahulu gambar untuk favicon blog anda. Favicon dapat berupa .ico atau .gif. Jika belum memilikinya, langsung saja klik http://www.html-kit.com/favicon/.
1. Kemudian klik tombol browse dan cari gambar dari komputer anda untuk dijadikan favicon.


2. Klik tombol Generate FavIcon.ico.
3. Klik link Download FavIcon Package.


4. Anda akan mendapatkan file beformat .zip, extract file .zip tersebut.
5. Upload favicon.ico atau animated_favicon1.gif ke image hosting anda.
    Mengganti Favicon di Address Bar Blog
    1. Login ke akun Blogger sobat.
    2. Masuk ke Rancangan > Edit HTML.
    3. Cari kode berikut ini (Gunakan Control + F):
     <b:include data='blog' name='all-head-content'/>
    4. Copy paste kode berikut ini di bawah kode tadi.
    <link href='url gambar.ico' rel='shortcut icon'/>
                                 atau
    <link href='url-gambar.gif' rel='icon' type='image/gif'/>
    5. Simpan templates.

    Setelah selesai melakukan pengeditan, sekarang lihat hasilnya. Jika anda melakukannya dengan benar, favicon ini akan tampil di address bar, sebelah kiri URL blog anda.

    Untuk cara memasang favicon di blog selain blogspot juga bisa menggunakan kode di atas. Tetapi pengeditan HTML-nya mungkin sedikit berbeda.

    Selamat mencoba!

    Referensi : tutorial blogging

      Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

      Tidak tahu cara berlangganan? Klik disini

      Related Post:

      Anda sedang membaca artikel tentang Cara Membuat dan Mengganti Favicon di Blog dan anda bisa menemukan artikel Cara Membuat dan Mengganti Favicon di Blog ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-dan-mengganti-favicon-di.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat dan Mengganti Favicon di Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat dan Mengganti Favicon di Blog sumbernya.


      16 comments

      chachacha April 17, 2011 at 10:50 AM

      makasih atas tutorialnya. . keren! XD

      Reply delete
      Unknown April 17, 2011 at 3:49 PM

      @chachacha
      Thanks gan, jangan lupa ikuti terus tutorialnya di blog serba guna ini.

      Reply delete
      Blog Sukses dan Bahagia April 18, 2011 at 2:47 AM

      Terima kasih infonya , aku perlu belajar lagi.

      Reply delete
      Unknown May 1, 2011 at 6:13 PM

      @Blog Sukses dan Bahagia
      OK Sob. Jangan lupa kunjungi terus DAW-XP untuk mendapatkan artikel terbaru.

      Reply delete
      radite_prastowo May 9, 2011 at 9:22 PM

      om ini kudu punya hosting dulu y om??

      Reply delete
      Unknown May 9, 2011 at 9:40 PM

      @radite_prastowo : Ga kok sob, ini hanya menggunakan hosting dari punya orang hanya untuk upload fotonya saja. Jika sudah di-upload ya tinggal pake javascript saja.

      Reply delete
      Ariiv May 21, 2011 at 8:04 PM

      maav kk , knp di blog saya tidak bisa y ??

      http://ex-stoob.blogspot.com

      Reply delete
      Unknown May 21, 2011 at 8:16 PM

      @Ariiv : Udah dicoba kedua kode di atas mas?
      kalo tetap nda bisa, letakkan kode tsb di atas kode Coba aja dlu .. :)

      Reply delete
      dam-id May 30, 2011 at 10:14 PM

      ini yang ane cari gan? thanks atas triknya..

      Reply delete
      Unknown May 30, 2011 at 10:17 PM

      @dam-id : OK, silahkan diterapkan terlebih dahulu di blog agan. Sama-sama gan, saya juga berterima kasih kepada agan karena sudah mau berkunjung dan berkomentar di blog sederhana ini. ;)

      Reply delete
      Ismail Fajar June 29, 2011 at 9:11 AM

      maaf, kalo cara ngeupload favicon ke image hosting gmn caranya ?

      Reply delete
      Tukang Catok July 21, 2011 at 8:55 AM

      makasih gan infonya.. sangat bermanfaat...

      Reply delete
      Unknown July 27, 2011 at 3:19 AM

      untuk permasalahan mengenai isi postingan yang ga bisa muncul gmn gan caranya?jadi yang muncul hanya judul postingan aja
      mohon untuk infonya
      makasih

      by adihansamu.blogspot.com

      Reply delete
      Unknown July 27, 2011 at 2:44 PM

      @adi : oh itu biasanya menggunakan fungsi kode .post-body{display:none;} untuk menampilkan hanya judul postingannya saja mas. :)

      Reply delete
      RRF-Online December 14, 2011 at 11:41 AM

      mantep gan...
      punya saya queenwarnet.blogspot.com sekarang dah berubah faviconnya...

      Reply delete
      obat mata minus January 30, 2014 at 11:33 AM

      penjelasannya dapat di pahami,thanks

      Reply delete

      Post a Comment

      Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

       

      Site Info

    • Fortuner SUV Terbaik
    • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
    • Cincin Kawin
    • PageRank

      Followers

      back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors