Favicon For Blog support IE8 (New Update)

*posting ini dibuat karena ada teman yang bertanya*
Bagi yang belum mengetahui apa 'Favicon". FAVICON adalah icon / gambar kecil pada address bar browser. seperti tampak pada gambar dibawah

langsing saja, eh... langsung saja. Cara menbuatnya adalah :
Cara Pertama
Siapakan gambar file yang akan digunakan sebagai "Favicon". sebaiknya gunakan file icon, yaitu file dengan eksitensi ".ico" (contoh : favicon-cuss.ico), jika belum memiliki file ini, bisa dicari/download di paman google. atau bisa membuatnya sendiri, yaitu dengan cara :
Upload dan generate File Gambar (.jpg, .gif, atau .png) yang ingin dipasang sebagai "Favicon", di situs penyedia "Favicon Generator" seperti

(1) Freefavicon
(2) Dynamicdrive
(3) Favicon
(4) Favicongenerator
(5) Favicon
(6) Favicon-generator
(7) Antifavicon
(8) Webscriptlab
(9) Degraeve
(10) Animatedfavicon
(11) Araphicsguru
(12) Genfavicon
(13) Favicongenerator
(14) Dagondesign
(15) Favicongenerator
(16) Faviconprime
(17) Favicontool
(18) Myfaves
(19) Scriptsocket
(20) Faviconicos
(21) Favikon
(22) Faviconcenter
(23) Favicon  

(24) Joomlaspan
(25) Favig
(26) Iconzworld  

(27) Tech-faq  

(28) Iconj  

(29) Searchengineoptimising  

(30) Free-favicons  

(31) Honeytechblog  

(32) Favicononline  

(33) Promojunkie 

(34) Faviconcreation

Sudah ah.. kalo masih kurang cari saja sendiri...

Note : Karena gambar yang dibutuhkan untuk Favicon kecil, maka buat gambar dengan ukuran kecil yaitu kurang lebih 16 x 16 Px s/d 48 x 48 px, supaya proses upload menjadi lebih cepat

setelah itu download file hasil generate. sebagai contoh digunakan http://www.freefavicon.com/ sebagai generator icon. karena file yang didownload berupa file .RAR, maka ekstract terlebih dahulu, lalu pilih file dengan eksitensi .ico. karena Blogger tidak support atau tidak mengijinkan mengupload file .ico, maka upload file .ico tersebut pada situs penyedia hosting. untuk free hosting bisa dicoba
http://www.110mb.com/ .
Google sites
atau bisa menggunakan
Flickr

Contoh Menggunakan Google Sites
Masuk ke account Google sites, juka belum memiliki account google, maka buat terlebih dahulu dengan mengklik "sign up"

Pada google site klik "create new site"

Pada halaman create new site : pilih templates, isi form "new your site" dengan nama site yang akan dibuat, lalu isikan form verifikasi kode sesuai dengan gambar yang tampak, lalu klik "create site"

Setelah sites baru jadi, pada halaman home klik "create page"

Pada halaman create new page, isikan form "name", lalu klik "create page"

Pada page, (Ex. Favicon), klik "add file" lalu klik "browse.." dan pilih file hasil download dari favicon generator yang telah di ekstrct untuk upload ke google site

Setelah Proses upload selesai, pada page (ex.Favicon) klik view

Kopi alamat situs yang ada pada adrress bar, lalu paste pada notepad

contoh file favicon dari google site

http://sites.google.com/site/catatancuss/favicon/favicon.ico?attredirects=0

Hapus code yang berwarna merah pada notepad dan menjadi

http://sites.google.com/site/catatancuss/favicon/favicon.ico

copy paste kode ini pada notepad untuk mempermudah editing


<link href='alamat favicon dari google site' rel='icon' type='image/vnd.microsoft.icon'/>


Isikan kode yang berwarna merah dengan address/alamat favicon yang telah diedit tadi sehingga menjadi
Ex.


<link href='http://sites.google.com/site/catatancuss/favicon/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>


Terakhir Copy paste kode yang telah diedit pada halaman "tata letak" - "edit Html" tepat diatas kode </head>(untuk mempermudah pencarian kode gunakan ctrl+f lalu ketik</head>) sehingga menjadi


<link href='http://sites.google.com/site/catatancuss/favicon/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
</head>

Lalu klik simpan templates
*Untuk cara hosting "Favicon" di webhosting lainnya, kurang lebih hampir sama.

Cara Kedua (New Update)
Hampir sama dengan cara pertama, hanya saja tidak menggunakan file .ico, tapi menggunakan file bereksitensi .PNG, atau .GIF yang bisa di resize atau di edit dengan ukuran 16x16 px pada software pengolah gambar (photoshop, corel, Dls), atau dapat diupload melalui "Favicon Generator" lalu setelah proses upload selesai, simpan gambar hasil upload ke komputer dengan cara  klik kanan - save image as atau save picture as. tergantung browse yang dipakai.

*image from http://www.freefavicon.com

setelah itu masuk ke blogger, buat laman baru yaitu Posting - Edit Laman - LAMAN BARU, lalu masukkan gambar yang di simpan  atau download tadi, lalu ganti mode penulisan pada "Edit HTML" bukan pada mode "Compose". pada area posting akan terlihat kode gambar/image seperti pada contoh dibawah

<img src="http://catatancuss.blogspot.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png" alt="" id="BLOGGER_PHOTO_ID_5212704798569567682" border="0" />


Sama seperti cara pertama yaitu, copy paste kode tersebut pada notepad, untuk memudahkan proses editing. lalu buang kode yang berwarna merah. dan akan terlihat seperti dibawah ini

"http://catatancuss.blogspot.com/_7rflRHkQmUU/SFc_ZW22lcI/AAAAAAAAASA/Y99-skckaeM/s400/favicon.png"


Simpan laman baru, tanpa judul.

Lalu copy paste kode dibawah ini pada notepad

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


Ganti kode warna merah dengan kode gambar yang disiapkan pada posting blog tadi, dan akan menjadi separti kode dibawah



<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvwZPjdOK4uXwxUpm0SyvRWPERy5x35DkZfD8V2rYk4c6I_yzzSjsVKPHt0Z58VJ1kuWRsRAE-Gzdpq9y1VmNCPgELm36D6jk17OjMJxdpOcOJ3j6i0tImFjD8_UMpgNqasPrAd_17PYR/s400/favicon.png' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvwZPjdOK4uXwxUpm0SyvRWPERy5x35DkZfD8V2rYk4c6I_yzzSjsVKPHt0Z58VJ1kuWRsRAE-Gzdpq9y1VmNCPgELm36D6jk17OjMJxdpOcOJ3j6i0tImFjD8_UMpgNqasPrAd_17PYR/s400/favicon.png' rel='icon'/>

Sama dengan cara pertama yaitu masukkan kode diatas/kode yang telah diedit pada notepad tadi diatas kode
</head>

dan akan tampak seperti dibawah


<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvwZPjdOK4uXwxUpm0SyvRWPERy5x35DkZfD8V2rYk4c6I_yzzSjsVKPHt0Z58VJ1kuWRsRAE-Gzdpq9y1VmNCPgELm36D6jk17OjMJxdpOcOJ3j6i0tImFjD8_UMpgNqasPrAd_17PYR/s400/favicon.png' rel='shortcut icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvwZPjdOK4uXwxUpm0SyvRWPERy5x35DkZfD8V2rYk4c6I_yzzSjsVKPHt0Z58VJ1kuWRsRAE-Gzdpq9y1VmNCPgELm36D6jk17OjMJxdpOcOJ3j6i0tImFjD8_UMpgNqasPrAd_17PYR/s400/favicon.png' rel='icon'/>
</head>

*hanya saja jika menggunakan cara kedua, maka tampilan favicon tidak akan terlihat pada browser IE, sebelum blog di bookmark dan direfresh

Sekian Terima kasih...
Wassalam....