February 12, 2011

Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser

Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser - Apa itu favicon?? Favicon adalah icon kecil yang tampil disebelah kiri alamat suatu website atau blog. Seperti apa sih Favicon itu?? mungkin screenshot dibawah ini bisa memperjelas dan memberi gambaran buat temen-temen yang masih bingung. . .


Screenshot di atas adalah contoh tampilan favicon dengan menggunakan browser mozilla firefox.

Untuk mengganti favicon Blogger (default) sobat blogger bisa melakukan langkah-langkah sebagai berikut:
Langkah pertama
1. Buat gambar yang berukuran kecil, gw saranin pake ukuran 16x16
2. Upload gambar tersebut ke image hosting, misalkan photobucket.com
3. Ambil URL gambar tersebut dan simpan di notepad

Langkah kedua
1. Login Ke blogger.com
2. Pilih menu "Design"
3. Klik "Edit HTML"
4. Cari kode </head> dan letakkan kode di bawah ini tepat di atasnya

<link rel="shortcut icon" href="URL gambar favicon"/>

5. Klik "Save Template"

Dengan mengikuti langkah-langkah di atas sebenarnya favicon sudah bisa terlihat pada browser seperti mozilla, opera, dan yang lainnya. Tetapi tidak dengan browser google chrome ataupun chrome plus. Coba perhatikan screenshot dibawah ini . . .


Screenshot di atas adalah contoh tampilan favicon dengan menggunakan browser chrome plus.

Untuk mengakalinya, coba tambahkan kode type="image/vnd.microsoft.icon" pada kode di nomor 4 langkah kedua. hasilnya nanti akan seperti dibawah ini. . .

<link rel="shortcut icon" href="URL gambar favicon" type="image/vnd.microsoft.icon"/>

Dengan menambahkan kode tersebut, favicon yang muncul nanti akan bisa tampil di semua browser, termasuk google chrome dan chrome plus.








Related Post on Agung X-Zeg Indraguna's World_

36 komentar:

Yulis Samoa said...

Hmm.. Pavicon saya muncul gak yah di semua browser? Bentar saya cek dulu deh di Opera, IE dan Google Chrome... :D

Zona Indonesia said...

Nice info... maslahnya adalah aku nggak bisa membuat gambar yang bagus pada ukuran kevil... Peace :)

Agung X-Zeg Indraguna said...

@All About Anime : Sama2 sob
@Yulis Samoa : Buruan di cek mba'.. kalo faviconnya gak muncul berarti malu tuh diliatin cewek cantik.. wkwkwk
@Zona Indonesia : haha.. bikin dulu aja yang gede, kan bisa di resize sob !!

sichandra said...

mantap ilmunya sob , saya sudah praktekan ilmu dari sobat :)

Agung X-Zeg Indraguna said...

@cuma berbagi apa yang gw tau sob.. thx udah nyempetin komen

Warna Tulisan said...

menarik sob, dapat dijadikan sebagai identitas blog.

Teras Info said...

oh..gitu ya caranya...
pantesan aja icon blog saya kalau di GC ga muncul...

terimakasih banyak atas triknya..

iam said...

Hehe thank's sob. Alhamdulilah, kalo di google chrome, faviconnya muncul :)

iNotes said...

Terima kasih atas infonya.. dicoba dulu nih :)

Me and Confucius said...

wah ini dy yg saya cari.. thx.,.

Tongkonanku said...

Berhasil gan. Thanks! :)

Goomelar said...

nice tutorial bro, kunjungan pertama nih. salam kenal yah,

Kang Epul said...

Makasih tutorialnya sob, saya coba praktekan di blog saya...

Agung X-Zeg Indraguna said...

@Warna Tulisan : betul pak, favicon memang bisa jd identitas blog@Teras Info : dicoba dulu aja sob
@iam : u r welcome.. alhamdulillah bisa bermanfaat
@iMemovaz : silahkan dicoba
@Me and Confucius : sama-sama :D
@Tongkonanku : sama-sama kawan
@Aria : Salam kenal juga sob
@Kang Epul : Silahkan kang, mari sama-sama belajar

ozan said...

mas,kok cuma bisa tampil di mozila aja ya?
kalo di google chrome tetep favicon blog yg kluar..
gimana ya mas?

Agung X-Zeg Indraguna said...

@ozan : coba dibaca artikelnya baik-baik sob.. biar faviconnya tampil di chrome, ganti kode yang ada di langkah nomor 4 dengan kode ini
<link rel="shortcut icon" href="URL gambar favicon" type="image/vnd.microsoft.icon"/>

ozan said...

@Agung X-Zeg Indraguna : terima kasih mas,udah bisa faviconnya di google chrome..
saya tadi ngga teliti baca postingannya hhe..
sekali lagi terima kasih.. :D

Agung X-Zeg Indraguna said...

@ozan : eapz.. sama-sama sob, senang bisa membantu :p

TAWANGSARI said...

nice info nya gan

Anonymous said...

Gak mempan tuh gan
gw udah coba di ie 9 & chrome
tolong di update tuh tutorialya, udah basiii!!

Agung X-Zeg Indraguna said...

Alhamdulillah...
ternyata ada orang yang ngasih komentar negatif di blog ini..
tapi sayang pemberi komentar di atas hanya berkomentar sebagai "Anonymous" dan enggak ngasih link (kenapa ea??), jadi gw enggak bisa datang ke blognya.. apa dia cuma iri gara-gara postingan gw nangkring di sepuluh besar google mulu ea?? hehehee

mungkin maksudna cuma mau nyela postingan gw aja kali?? enggak tau jg deh!! tapi sepanjang postingan gw bermanfaat buat orang lain, gw enggak perlu nanggapinnya dengan kata-kata kasar n sinis pula.

tapi ea udahlah, gw mau ucapin terima kasih aja buat komentarnya, moga komentar di atas bisa buat gw jauh lebih baik lagi ^_^

Blogteguh said...

thank's bro ane berhasil

dunia-tersembunyi said...

ko gw kgk berhasil yee...error gt ...

Rizuki Hiroto said...

Terimakasih sobat. Masalah saya selama ini icon tidak muncul di GC... Berkat tutorial diatas sekarang dah bisa... Kunjungi blog aq juga sob..tinggalkan pesan dan lihatlah sudah ada FAVICONnya (horeeee...senang bgt) hwehehhee.....

X1 (Happy and Dicky) said...

gif nya gak bisa jalan bro...! klo buat animasi?

Anak Kaisar China said...

ane coba duluuu yaa gann.........

setyoazzahra said...

bos...kok punya saya gak bisa ya?pasti tulisanya error gtu

donimasrul said...

Seep sob, punya ane dah nongol, makasih ya tutorialnya...

wawan said...

makasih tutornya sob... ane coba dulu di blog ane yach...!!!

Unknown said...

its works thanks yah....mampir 2 ke http://emtaufik79.blogspot.com/

ajeng said...

Sipp mas bro berhasil dengan baik, ketemu juga tutornya nih :)

wawan said...

Makasih yach sob,,udah berbagi infonya...

Matthiday said...

Thanks a lot gan... ampuh banget deh.
by the way, kunjungi balik yaaa :-)

http://matt-hiday.blogspot.com/

Laksana Shared said...

Di Coba dulu .

Sobi Palembang said...

gan gak bisa gan :( mohon bantuannya

AndRah said...

Wah sangat membantu artikel nya, trims master,, salam kenal dari newbie other blogger indonesia !

Post a Comment