11.9.09

Membuat Favicon via Favicon Maker

Iseng-iseng tadi buat favicon.. nyari ilmu ke rumah-rumah tetangga, dapat sih... tapi pas langkah yang kesekian, saya langsung mentok, pasalnya, gambar favicon kita yang sudah digenerate harus di upload ke yahoo geocietes untuk mendapatkan urlnya, setelah menuju ke TKP ternyata Geocities sudah ga ada alias sudah ditutup (baru tahu soalnya masih newbie). Sementara hasil ganerate yang sudah berformat ico tidak bisa diterima oleh photobucket...

Tapi saya belum mau menyerah, saya coba browsing dan akhirnya ketemu Favicon maker, dengan modal nol saya coba ikuti langkah2 yang diberikan dalam bahasa londoh tersebut.. Alhasil, tereeeeeng.. saya sudah punya favicon... simpel tapi dengan usaha keras hehehe

Ok.. buat sobat-sobit yang senior, atau yang sudah memiliki favicon, abaikan aja postingan ini. Bagi yang pendatang baru seperti saya mungkin ini berguna: (Mungkiiiiiiinnn)

Langkah-langkahnya:
  1. Siapkan gambar yang akan di jadikan Favicon. Saya pakai contoh punya saya.
  2. Buka situs Favicon Maker atau klik di sini
  3. Akan muncul situs seperti ini :
  4. Klik bagian seperti di gambar berikut:

    Klik telusuri (kode No 2), ambil gambar yang mau dijadikan favicon hingga muncul tulisan di dalam kotak seperti gbr di atas. kemudian klik create Favicon (kode No 3)
  5. Setelah itu akan muncul :

    Download favicon dengan mengklik butoon "Get it Now" Seperti kode No 4
  6. Kemudian akan muncul :
  7. Klik Ok
  8. Favicon akan tersimpan di hard disk komputer sobat.Awalnya dalam bentuk Zipfile (kode No 6), jangan lupa untuk di extract sehingga muncul 3 buah icon seperti kode No 7. Cara extract: klik kanan pada file no 6 pilih extract here.
  9. Buka Photobucket. Login dengan Username sobat. (Bagi yang belum daftar silahkan daftar)
  10. Upload salah satu gambar hasil extract tadi. Kebetulan yang saya pilih adalah gbr pertama yaitu animated_favicon yang hasilnya juga dalam bentuk gerak.
  11. Bila selesai langkah-langkah upload, akan muncul di halaman depan photobucket kita (mungkin background beda karena saya memakai theme background) dan favicon kita sudah muncul seperti pada gambar dengan kode N0 8:
    arahkan panah pada favicon kita sehingga muncul pilihan url dibawahnya, pilih url dibagian "Direct Link" copy dan ganti tulisan yang berwarna merah di bawah ini dengan url punya sobat :
    <link rel="shortcut icon" href="http://i692.photobucket.com/albums/vv289/icawoman/animated_favicon.gif"/>
  12. Langkah berikutnya: Login ke Blogger, masukan ID sobat.
  13. Klik Layout (Tata Letak)
  14. Klik Edit HTML
  15. Cari kode </head>, letakkan kode HTML yang telah di buat di atas tepat di atas tulisan </head>. Jangan lupa Kode HTML di atas telah di ganti yang berwarna merah dengan url sobat yang di dapat dari "direct link" photobucket.
  16. Klik Save Template
  17. Selesai

    Silahkan mencoba. Untuk hasil yang saya peroleh dapat dilihat pada sebelah alamat blog di atas. (Ini dia hasilnya):




    _______________________________
    Catatan tambahan:
    Gambar yang disiapkan sejak awal diusahakan berukuran 16 x 16 px (dapat dibuat di photoshop atau program sejenis), atau juga dapat langsung di ambil di :
    www.iconarchive.com atau http://freeicon7.net


28 komentar:

iin mengatakan...

mbak ica ,..aku masih belum ngerti,buat apa seh pasang favicon?fungsinya apa?maklum pemula....hehe

Ica mengatakan...

kakve-santi : Silahkan sobat...
iin : Mba Iin, Favicon itu Favorit Icon. Itu...tu.. cba mbak perhatikan di samping alamat blog mbak di atas.. ada kotak merah dengan huruf B didalamnya.. nah itu dia Favicon (Faviconnya Blog), kalau kita mau buat favicon sendiri biar beda, caranya seperti dalam postingan di atas. Tadinya punya saya juga kotak warna merah dgn huruf B di dalamnya, sekarang dah berubah jadi smile warna biru.

zein mengatakan...

wahh berguna sekali.. nih... ta pakai ya... emang lg nyari yg kaya gini nih,,ntar di coba ahh..
makasih nih postingannya informative bgt..
sukses selalu bwat ica.. :D

narti mengatakan...

bener mba, walaupun sederhana kalau hasil kerja keras sendiri tentu bangga, apalagi bisa berbagi dengan teman lainnya.
semangat ya.
makasih banget artikelnya.

Ancis mengatakan...

Hmmm kunjungan lagi nih di pagi hari..... sekalian nyebar koment....

Artikelnya bagus tuh bwt Newbie...
Itung2 berbagi... bulan puasa lagi....

hill mengatakan...

kunjungan perdana, salam kenal:) tips yg menarik mbak

salam

hill

imenoreh mengatakan...

Mantaps bgt infonya sob..aq ambil yah??maksudku ambil ilmuny gtu..

Ica mengatakan...

@Zein : Ok bro.. makasih ya
@Narti : Iya nih mbak... senang emang kalau kita bisa melakukan sesuatu yang kecil namun terasa berarti..makasih mbak
@Ancis : iya nih kemarin saya juga masih dapetin ada beberapa pertanyaan dari teman2 gimana sih buat favicon, karena tutorial dulu khan harus leawat geocities. Makasih ya sob..
@Hill : Makasih sob... dan meluangkan waktu berkunjung dan meninggalkan komen di gubuk saya nih.. salam kenal balik
@Imenoreh : ambil...ambil... silahkan... buat imenoreh sih... no problem.. otreee

kakara mengatakan...

Keren-keren penjelasannya muantab ..
sangat jelas..pokoknya topbgt deh..
keep share.. salam sukses :)

red mengatakan...

boleh juga tutorialnya. tapi di WP jauh lebih simpel. masuk ke admin panel, tinggal install plugin yang namanya maxblogpress favicon, tinggal pilih gambar2nya saja. cuman dia static, tidak animated kaya punyamu say :)

m2k mengatakan...

wah dapat tambahan ilmu nih...
terima kasih ya atas informasinya

deINDIES mengatakan...

deINDIES juga pake pavicon maker kok hihihi, nice posting

Computa mengatakan...

wahhhh gan makasih banget nih.... dah nyoba soal favikon sampe 11x akhir'e berhasil juga heheeeee hihhhh cape...
mampir ya di : http://computa-1.blogspot.com\
SALAM GABUNG

Anonim mengatakan...

is jill wagner dating http://loveepicentre.com/advice.php dating bpd women

Anonim mengatakan...

sites for sale ebook http://audiobooksplanet.co.uk/de/B-cher-auf-Franz-sisch/c1004/?page=37 wayne dyer ebook free [url=http://audiobooksplanet.co.uk/fr/Bear-Island/p208004/]70-624 cert ebook[/url] the abc of stock speculation ebook

Anonim mengatakan...

chemistry bishop ebook http://audiobooksworld.co.uk/Matthias-Fladung/m85569/ imp reader ebook [url=http://audiobooksworld.co.uk/Feynman-and-computation-exploring-the-limits-of-computers/p100080/]wicked lovely ebook for free[/url] conformed to his image ebook

Anonim mengatakan...

the god delusion ebook http://audiobooksworld.co.uk/A-Mathematical-Introduction-to-Dirac-s-Formalism/p188375/ structural timber design and technology ebook [url=http://audiobooksworld.co.uk/Foy-Allen-Edelman/m38308/]the stand stephen king ebook[/url] cosmic motors ebook
[url=http://audiobooksworld.co.uk/it/Scuole-periodi-e-stili/c1345/?page=4][img]http://audiobooksworld.co.uk/image/6.gif[/img][/url]

Anonim mengatakan...

garmen software http://buyoem.co.uk/it/category-100-109/Antivirus-e-Securiti?page=2 partition extending software [url=http://buyoem.co.uk/it/product-13469/Diskeeper-Professional-Edition-v9-0]computer software installer store[/url] tax practice software
[url=http://buyoem.co.uk/category-12/Multimedia-and-Entertainment?page=126]Multimedia & Entertainment - Download OEM, Software Sale, OEM Software[/url] garmin nuvi 310 radar decting software
[url=http://buyoem.co.uk/product-10425/InstallAware-Studio-Admin-7-0][img]http://buyoem.co.uk/image/2.gif[/img][/url]

Anonim mengatakan...

white board software http://buyoem.co.uk/category-100-104/Software-Plugins?page=5 computer technician diagnostic software [url=http://buyoem.co.uk/it/product-37131/RAC-Server-3-3]simple software vibration analysis[/url] gameshark gba sp pc software
[url=http://buyoem.co.uk/product-15005/gSync-1-0-Mac]gSync 1.0 [Mac] - Download OEM, Software Sale, OEM Software[/url] computer software stoes in minneapolis
[url=http://buyoem.co.uk/product-37154/Ultralingua-6-0-French-Definitions-and-Synonyms][img]http://buyoem.co.uk/image/4.gif[/img][/url]

Anonim mengatakan...

what is groove software http://buyoemsoftware.co.uk/product-36967/CamBlocker-1-0 adobe acrobat software on sale [url=http://buyoemsoftware.co.uk/product-10255/HumanSoftware-PhotoRepeat-1-53-for-Adobe-Photoshop]yardi software user manual download[/url] xp pro software
[url=http://buyoemsoftware.co.uk/it/category-200-209/Antivirus-e-Securiti]Antivirus e Securiti - Cheap Legal OEM Software, Software Sale, Download OEM[/url] t-mobile wing software
[url=http://buyoemsoftware.co.uk/product-37382/Clean-MemXP-9-4][img]http://buyoem.co.uk/image/6.gif[/img][/url]

Anonim mengatakan...

[url=http://englandpharmacy.co.uk/products/seroquel.htm][img]http://onlinemedistore.com/1.jpg[/img][/url]
searchengines tenuate25mgs online pharmacy http://englandpharmacy.co.uk/products/bactrim.htm super value pharmacy tx [url=http://englandpharmacy.co.uk/products/benicar.htm]pharmacy time[/url]
drug world pharmacy http://englandpharmacy.co.uk/products/imodium.htm online pharmacy cipro [url=http://englandpharmacy.co.uk/products/acai.htm]acai[/url]
mark bonfiglio and pharmacy http://englandpharmacy.co.uk/products/lipitor.htm pharmacy theft [url=http://englandpharmacy.co.uk/products/nimotop.htm]louisiana pharmacy technician[/url]
pharmacy mexican oxy http://englandpharmacy.co.uk/products/estrace.htm pharmacy gift mortar pestle white opens [url=http://englandpharmacy.co.uk/products/claritin.htm]claritin[/url]

 



Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service








Great Morning ©  Copyright by Everything | Template by Blogger Templates | Blog Trick at Blog-HowToTricks