Cara Membuat/Memasang Favicon & Animated Favicon di Blog

favicon
Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.
Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon  anda dapat menggunakan file gambar berformat gif.

Berikut langkah-langkah pembuatannya:
1. Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
2. Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
3. Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif  ini untuk mengupload favicon anda.
4. Copy terlebih dahulu direct link dari gambar yang telah diupload.
5. Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.
Untuk favicon file ico:
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Untuk animated favicon file gif:
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:
<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>
6. Preview dan save.
7. Done!

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara Membuat/Memasang Favicon & Animated Favicon di Blog
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 46 Comment(s):

4you said...

Thanks gan, infonya bener2 bermanfaat. boleh tanya gan.. ! gmn caranya supaya blog kita terindek dengan cepat di google search?

Ahmad Khoirul Azmee said...

artikelnya kan sudah ada bro, lihat di sidebar featured posts atau ke link ini: Cara Membuat Blog Cepat Terindeks Google Search Engine :D

om onny said...

terima kasih atas tutorialnya

Laras Mays said...

Banyakinformasi bermanfaat disini Gan,makasih banyak tutornya.Ane sekarang sudah bisa menggunakan favicon.

Sinar Abadi said...

ok cakep.. thanks bangeth...

Danik Fachrudin said...

mantep . . . oieeee..

Kresna's Creation said...

kok diedit html saya tdk ada meta tag ya? apa bisa terpasang dengan baik faviconnya? trims..

Bandit Blues said...

THX BUAT POSTINGANNYA..SANGAT BERMANFAAT !!!

4NOVA said...

blog nya baguss gan...mantabbb...thx 4 sharing...

amweb8 said...

siip..saya suka itu.....

Dian Fajar Samsi (a'an) said...

ada yang langsung jadi tidak

burhan said...

thanks bro..

Info Toko Surya62 said...

numpang ijin minta-minta Bos, ini info bagus, sambil numpang kenal deh permisi dan ... makasiiiih

obatoneclinic said...

makasih masbro infonya, langsung ane cobak ni...

langsung seketika jadi masbro... info yang simpel, praktis padat dan berisi masbro,

saya tunggu info yang berikutnya masbro.

Lapak Online Malang said...

kok gak bisa gan punya saya ya??

Bisnis Online Termurah said...

gak ndetek tuh gan!!

gamis said...

asyik triknya dapet wawasan baru nih....terimakasih ya

Rudy Hartono said...

kunjungan malam sob

jemmy said...

Cuma mau melengkapi gan,.
disini cara desain Favicon

http://jemyshombing.com/?p=267

Aditya Firmansyah said...

wihh keren

natural crystal x said...

coba tapi kok ga bisa mas...

rudiansyah said...

wah mantaplah gan,, nyari2 ternyata nemu disini, masih belajar.. thanks

DuniaUnic.com said...

ada contoh yang bisa di gunakan gak sob?

FBA said...

pernah ane coba ob, tapi gagal.. setelah baca artikel sobat, kegagalan sirna dan jadi berhasil...
thanks sob

Rie_zha said...

saya coba pake yg animaated,, tapi animatednya kok gak jalan yaa gan, mohon pencerahannya,, mkasih,, :)

dealer honda semarang said...

Pernah nyobain favicon yang berbentuk animasi malah jadi memberatkan proses loading blog. Makasih sduah bagi ilmunya

Mhoza CupLas CupLis said...

thank's gan and follow me blog ya

bestetalase said...

thx yah informasinya. sukses selalu

3D LED Smart TV Reviews said...

sekarang udah bisa langsung di upload ke google boss, gak usah hostingan di luar gambarnya,blogger tambah OK

ady said...

thank's banget gan...
bermanfaat banget nhe...

kunjungi blog newbie saya yaw
http://blogzets.blogspot.com/

Sukalagu said...

Istimewa,, saya suka artikelnya..

semua tentang cinta said...

thanks infonya sob.. lgsung praktek :-D

technology said...

thank's for you post.

Farah's said...

Terima kasih infonya sangat bermanfaat sekali.... ^_^

jalan sehat said...

informasi yang diberikan pas banget nih gan karena ane lagi nyari2 yang seperti ini,,yaitu cara memasang favicon,,hee

Kim De de said...

sebelumnya terima kasih.. tapi ko gak bisa bisa maklun newbie.. klao boleh saya minta cara yg lebih detail

Dian Galih S. said...

makasih infonya. pake cara ini langsung sukses (y)

Basri Matindas said...

Terima kasih infonya bro sangat bermanfaat... kunjungan balik ya... http://boltim.blogspot.com

jiper4ever.com said...

Infonya bagus gan..

mampir kemari gan http://www.jiper4ever.com
jngan lupa difollow ya
thank's

AFIQ HAFIZ said...

makasi infonya bang!! sangat bermamfaat....

ALDYRELOAD said...

Makasih infonya Gan....

Zain Uddin said...

syukron katsiron....

Muhammad Supendi said...

harus banyak belajar lagi saya..hehe

sporakomputer said...

keren gan, langsung TKP ke situs favicon aja lah ^_^

forbidden007 said...

thanks kk sangat bermanfaat :)

Edy said...

infonya boleh juga ini di cobak..

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap