Blog > tutorial > membuat logo disamping address bar

membuat logo disamping address bar

Posted by lukito in Sunday, June 14th 2009   
Topics: tutorial
Tags: ,

Anda pernah melihat logo kecil sebuah blog atau website dengan gambar/ image menarik disamping url blog yang sedang kita kunjungi?favicon-icofavicon.ico merupakan logo penegasan dari sebuah blog Yup, anda pasti pernah kan?! contohnya seperti yang ada diblog saya ini. Tahukah anda bagaimana cara membuatnya? logo tersebut harus ber ekstension “.ico” jadi tidak bisa kita membuat image sembarang extension seperti jpg, png, ataupun gif kemudian kita upload di web kita untuk dijadikan logo tersebut, karena tidak akan tampak sebagai logo icon. Lalu bagaimana cara membuatnya?

  • Anda harus membuat gambar diri, logo atau apa sesuka anda pada Adobe photoshop. Ukuran image size jangan besar, cukup beri ukuran 16×16 pixels pada bidang yang akan anda beri logo.
  • Sesudah jadi kemudian beri nama sesuka anda dan masuklah anda ke website www.html-kit.com/favicon salah satu penyedia layanan untuk merubah extension image menjadi favicon.ico
  • Masukkan logo yang baru saja anda buat pada Photoshop tersebut ke dalam www.html-kit.com/favicon dan tekan “generate favicon.ico” lihat screenshot dibawah ini
    generate-favicon-ico
  • Anda akan mendapatkan sebuah link untuk di download
    download-hasil-generate
  • Kemudian upload file “favicon.ico” hasil download tersebut ke dalam FTP anda atau ke dalam cpanel anda. Jangan keliru untuk menaruh hanya di dalam folder “public_html” untuk website anda
  • Untuk blog anda yang ber platform worpress seperti blog saya ini upload ke dalam folder “public_html/wp-content/themes/nama theme yang anda pakai/”
  • Kemudian langkah terakhir cari file yang bernama index.php, atau index.html
  • Untuk blog yang bermesin wordpress masuk ke file header.php yang terletak pada  ”public_html/wp-content/themes/nama theme yang anda pakai/header.php” dan buka editornya (HTML). Lalu bagaimana jika blog saya dari blogspot? www.blogsaya.blogspot.com? bagaimana cara merubahnya? nanti Insya Allah akan saya postingkan terpisah.
  • Sisipkan kode berikut <link rel=”shortcut icon” href=”favicon.ico”>, tapi jika tidak nampak seperti yang saya alami, ganti kodenya dengan  <link rel=”shortcut icon” href=”http://www.namabloganda.com/wp-content/themes/nama theme yang anda pakai/favicon.ico”>sesudah tag <head> dan sebelum tag </head>
  • Refresh blog anda dan lihatlah sisi kiri url blog anda akan tampak logo favicon buatan anda.

Keren Bukan??!!

Berlangganan Artikel gratis

Anda dapat berlangganan secara gratis artikel-artikel di blog ini. Masukkan alamat email anda, kemudian verifikasi didalam inbox e-mail anda. artikel akan terkirim secara otomatis ke e-mail anda setiap ada artikel baru

Related Post

Spread the word

Digg this post

Bookmark to delicious

Stumble the post

Add to your technorati favourite

16 users responded to this post

ariesre said in June 15th, 2009 at 12:28 am    

sudah pernah saya coba dulu mas di website saya yg tidak pernah dilanjutkan :D
tapi,,terima kasih mas sudah mengingatkan,,jadi inget dulu masa2 blajar html,,dari newbie ……dan tidak pernah meningkat lagi he he he he

[Reply]

Tony said in June 15th, 2009 at 1:37 am    

wah mantap baru tahu nih thank infonya :)

[Reply]

Agus Prayitno said in June 15th, 2009 at 2:07 am    

^:)^ tambah ilmu nehh… lain hari posting yang bisa dapat tambahan penghasilan ya sob ???…

[Reply]

Lukito said in June 15th, 2009 at 2:43 am    
@ariesre: belajarlah terus mas, anda akan menjadi pintar. Kita sama-sama newbie dan sama-sama masih belajar
@Tony: Jadi malu nih sama Mas Tony yang lebih senior dan berpengalaman ::
@Agus Prayitno: posting untuk monetisasi blog ya pren?! oke deh lain kali aku posting kan. Insya Allah

[Reply]

Artvisualizer said in June 15th, 2009 at 2:13 pm    

info menarik, sekedar nambahin alternatif nih bang, biasanya saya pake yang di .www.favicongenerator.com, gratis juga sih..

[Reply]

domba garut! said in June 15th, 2009 at 9:52 pm    

trims buat tipsnya yah.. ditunggu tips2 berikutnya.. salam hangat dari afrika barat…

[Reply]

munawar am said in June 16th, 2009 at 1:06 am    

saya juga membuatnya dengan menggunakan html-kit/favicon;
cepet dan mantep.

[Reply]

GerlNich said in June 16th, 2009 at 4:24 am    

Saya dah sering coba tp y….
Wkwkwk…
Mas sdh saya kasi award y..
Bisa d ambil d Blogq
Tx

[Reply]

japraxxx said in June 17th, 2009 at 6:24 pm    

waduh…mana ne yg buat blogspot nya? segera diposting ea sob… :D^

[Reply]

Abdul Cholik said in July 11th, 2009 at 9:08 am    

wah,kalau sudah bicara cpanel berarti self hosting ya mas.Entar dah saya pindah rumah soalnya sekarang masih di gratisan.Sebagai ilmu tentu ini merupakan pelajaran berharga walau belum bisa saya aplikasikan di blog saya.Atau barangkali ada metoda lain?
terima kasih

Salam ::/

[Reply]

Bengkel Tv said in August 8th, 2009 at 2:37 am    

Ini dia tutorial yang saya cari2.Akhirnya ketemu juga.Oiya mas sekalian mo tanya saya juga pake plugin wp-cumulus seperti yang mas pake di tag cloud nya tapi punya saya tampilannya kecil saya coba setting tapi g bisa.cara settingnya gmana y mas.Klo berkenan tolong bales comment saya y mas ^:)^ ^:)^ …..thx

[Reply]

lukito said in August 9th, 2009 at 6:12 am    
@Artvisualizer: Ya..itu juga bisa mas
@domba garut:Salam hangat juga dari Surabaya. Anda mewakili kita sebagai duta bangsa disana
@munawar am: siipp.. kang
@GerlNich: Thank’s ya dik awardnya. jadi tersanjung nih..
@Abdul Cholik: Untuk blog yang berbasis wordpress.com tidak bisa pak, karena dibatasi oleh adminnya
@Bengkel Tv: wp-cumulus ya..?! untuk setting tampilan perbesar atau perkecil, setelah anda masuk ke dashboard, cari settings -> wp cumulus, disitu terdapat options untuk membuat tampilannya seberapa pxl menurut ukuran widget anda, kemudian warna background dan teks pun bisa anda sesuaikan menurut selera
penyesuaian ukuran wp cumulus

[Reply]

bisnis online said in September 10th, 2009 at 11:53 pm    

wow, thanks tutorialnya pak. biasanya sih aku gunakan plugin di wp. tapi sekarang udah faham cara buat sendiri :-^^

[Reply]

borokokok said in November 10th, 2009 at 6:19 am    

gan klo saya mo bikin favicon sendiri, ukurannya harus berapa x berapa px?

[Reply]

lukito Reply:
November 10th, 2009 at 1:56 pm

@borokokok: idealnya ukuran 16 x 16 pxl

[Reply]

free logos vector said in November 21st, 2009 at 11:00 am    

Thanks mas atas semuanya, Jadi Tahu dech

[Reply]

emir said in December 24th, 2009 at 8:03 am    

:D/ makasih bro..coba dulu ah.. :D/

[Reply]

tinggalkan komentar anda. Spam? Jangan!!


%-( :):- :!! #:- %74 X( 3:-O :D/ :) ;) =:) ::nga: ~O) L-) =(( :-) [-( :-$ :O) :-L :LK o-: ::-P ^:)^ 8-X :x :( : ::D: *-:) :: ::/ :-?? :- b-( :@) =)) /:) :-^^ :(( :() :-@ 8-} :-q ;)) :-B :o3 :-O @};- o-+ (~~) [-X =D: O:-) ::S ;;) 86: :P =; X_X 00-: [-O: ::) :-S :)) :-w B-) ~:: :-/ (*) :-* $-) :D %%-

« Software pembantu untuk mencari blog dofollow
Membuat username dengan nama sendiri di facebook »