Cara membuat favourite icon/favicon di wordpress
Posted on 02. Apr, 2009 by Antoro in Tutorial
Sudah direvisi, thanks buat ade atas kritiknya…
Tutorial ini berawal pas beli nih domain, temenku si fanza (yang punya blog dot com baru haha) tanya, “gimana sih caranya buat gambar kecil di kiri http//…. pada browser?”
Oh, itu namanya favourite icon alias favicon. Favicon adalah gambar kecil berukuran 16 x 16 pixel yang berekstensi .ico. Fungsinya untuk mempermanis sebuah title website ketika berada dalam tab browser (lihat gambar)
Karena lagi marak-maraknya main wordpress, akan kutampilkan cara menampilkan favicon di blog wordpress. Jadi perhatikan baik-baik… (buat yang themes nya sudah ada favicon nya, tinggal ganti aja gambar dengan yang kamu suka, bagi yang belum ada favicon.ico ini caranya…)
Eh sebelumnya, buat dulu gambar favicon nya lewat corel atau photoshop, tapi aku lebih milih pakai photoshop, gambarnya lebih bagus. Ini caraku membuat favicon (nggak tau kalo yang lain)
pertama buka photoshop, buat halaman baru, terus kasih ukuran 16 x 16 pixel. buatlah gambar sesuka kamu. Ukurannya kecil, jadi jangan buat gambar yang terlalu mendetail.
Setelah selesai, pilih file file >> save for web & devices… atau pencet Alt+Shift+Ctrl+S pada keyboard. Nah kalau gambar favicon kita tidak penuh (seperti favicon saya) lalu di save dengan format .jpg gambar tidak akan terlihat transparan alias bentuknya kotak dengan background putih dibelakangnya, maka ganti format gambar menjadi PNG-24 dan contreng transparancy. Lanjutkan dengan save.
Nah ini tahap yang paling penting, pada jendela save, ada kolom file name , isi dengan mengetikkan: favicon.ico terus simpan di hardisk alias klik Save.
langkah selanjutnya adalah upload favicon tadi lewat file manager. Buka file manager, terus masuk ke direktori themes yang saat ini aktif (maksudnya themes yang digunakan saat ini) htdocs > wp-content > themes > tema yang aktif
Oke, upload gambar favicon tadi, satu direktori dengan index.php,header.php…etc
Saatnya kita edit index.php untuk memanggil favicon tadi biar tampil. caranya login ke dashboard wordpress, masuk ke themes editor, cari yang header.php, klik!
kopi kode berikut:
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
dan paste di atas kode berikut:
<?php wp_head(); ?>
lalu klik update! Buka kembali alamat blog kita, jika belum muncul, coba clear private data browser kita, dan buka lagi… Selamat mencoba
Artikel Terkait:
- Membuat animasi gambar bergerak gif dengan photoshop bag.2 Setelah kemaren mebuat animasi pergerakan warna, kita akan mencoba mmbuat scrolled text alias text berjalan gambar gif...
- Cara back-up database pada wordpress Hal ini memang masalah sepele, tapi sangat berguna jika kita rajin melakukannya. Sering terjadi database kita hilang akibat maintenance dari server, hilang ketika meng-upgrade wordpress, ...
- Cara upgrade ke wordpress 2.8 Wordpress.org mengeluarkan CMS wordpress versi terbarunya , yaitu wordpress 2.8, kelanjutan wordpress versi beta yang saya posting waktu itu...
- Membuat animasi gambar bergerak gif dengan photoshop Selain buat edit-edit foto, photoshop juga bisa kita gunakan untuk membuat gambar bergerak / animasi dalam format .gif...
- Cara pindah artikel dari blog lama ke blog baru Disadur dari blogila.co.cc Kali ini saya akan bercerita, eh tepatnya memberi saran bagaimana caranya pindahan posting. Maksudnya memindahkan seluruh posting dari blog lama (misal: http://www.blogkugitu.co.cc) ke blog baru wordpress(misal: http://www.geje.com). Artikel ini terinspirasi dari banyaknya teman-teman yang sekarang memiliki blog dengan hosting sendiri dan domain baru, yang sayang untuk meninggalkan...
pandjoel
Apr 2nd, 2009
Tuh za, dah tak kasih tutorialnya…
sodagamebira.com
Apr 3rd, 2009
woyyy,thanks ejol!!!!
heheheh
unee
Apr 6th, 2009
pi ye e njoel. tak imel, ra dibales, padahal yo podho-podho o el. oio comment blog ku wis iso njoel. dadi rasido takon koe.
unee
Apr 6th, 2009
tampang mu ki lho nji kok medeni… hahahahaha
unee
Apr 6th, 2009
excited bwt blajar web…
pandjoel
Apr 8th, 2009
salut deh yun, beli domain dot com ato dot net juga donk
ard
Apr 16th, 2009
ohhh gitu ya mas???
sa,pean anak amikom toh??
ckckckck
pandjoel
Apr 17th, 2009
To ard » loh, sampean anak mana ya? kok kenal saya? salam kenal aja deh…
pii
Apr 18th, 2009
Thanks brother…
sawit
Mei 25th, 2009
Siiipppppppp….
Cen ra mbakat design cen angen yo Njulll…..
posting terakhir dari blog milik sawit adalah
ferry kurniawan
Agu 31st, 2009
maz…gmn cara namplin..header.php temanya ,?aq mash bngng bnget..ni!!!thnx ats bmbngnnya
ferry kurniawan
Agu 31st, 2009
maz…mau tnya lg..ni.gmn cranya biar postingan blog kita bisa terindex d search engine?maaf maz klu aq kbanyaan nanya!cause baru pemula
legowo
Okt 9th, 2009
akhirnya bisa juga pasang favicon; setelah trial error; thx..
mahardi
Okt 11th, 2009
searching ttg bikin favicon di wordpress.org akhirnya ketemu situs ini.
Thx for great tips…
pandjoel
Okt 13th, 2009
@mahardi: sama-sama…
Laptop Murah
Nov 5th, 2009
Thanks tips sdh aq coba dan berhasil..btw sampean koq ga pasang favicon?
kunjungi webQ ya..Toko Laptop
pandjoel
Nov 6th, 2009
@Laptop murah: hehe maklum belum sepet, baru aja ganti themes…. sip^^
bagosbanget
Des 14th, 2009
Dicoba dah bang! Makasi tutorialnya! :D
pandjoel
Des 15th, 2009
@bagosbanget: sama sama ^^
santozrx
Mei 2nd, 2010
wooo ngono to mas.?
mas e wongendi…beneran anak amikom po?
santozrx
Mei 2nd, 2010
salam kenal y mas…
santozrx
Mei 2nd, 2010
uda berhasil bung…,
Tashim's Weblog
Mei 16th, 2010
I’m looking for a tips how to make favorite icon in wordpress, finally I get it in your blog, thanks
eksoemut
Jul 8th, 2010
thanks bro…. :)
Antoro
Jul 14th, 2010
@ekosemut: sama2 ^^
khalyla
Agu 22nd, 2010
terima kasih infonya kk.. udh dicoba dan berhasil
khalyla
Agu 22nd, 2010
terima kasih infonya kk… udh dicoba dan berhasil