Senin, 09 Juli 2012

Tutorial Memasang Favicon Pada Blog



Monday,9 july 2012
Makkah Saudi Arabia
 Bismillah...

       Sahabat cahaya ketemu lagi dengan sang pencari cahaya,sudahkah sahabat bertambah ilmu baru hari ini...WADUH RUGI DEH KALO GTU...kasihan deh looo...
Baiklah kalo belum pada artikel saya kali ini akan membahas tentang "Tutorial Memasang Favicon Website pada Blogspot atau Wordpress Blogspot".sebelumnya jangan anggap saya lebih pinter dari sahabat cahaya...saya juga masih belajar...hanya saja munggin porsi belajar kita beda...betul tidak???. (tanya aja dengan mbah google).



      Sebelum kita mempelajari cara memasang Logo Gambar Favicon pada website atau blog, terlebih dahulu kita pelajari apakah favicon itu ? Favicon adalah Gambar logo yang tertera pada sebelah kiri bagian address bar pada suatu browser . Favicon juga dikenal dengan sebutan shortcut icon, website icon, URL Icon, bookmark icon yang berbentuk gambar icon kecil dengan ukuran 16 x 16 pixel . Pada browser Logo favicon ini biasanya ditampilkan pada address bar atau Bookmark menu.

       Dengan memiliki favicon pada blog atau website kita, tentunya favicon ini bisa kita jadikan ciri khas atau identitas dari blog atau website kita. Favicon biasanya berformat .ICO , File gambar .Gif atau gambar dengan format .PNG. Ukuran yang support digunakan biasanya gambar dengan ukuran 16 x 16, 32 x 32 atau 48 x 48 px.pixel, dengan Color Depth 8-bit, 24-bit atau 32-bit.

Bagaimana cara memasukan Gambar logo tersebut agar bisa menjadi favicon blog atau website kita ? Berikut ini langkah langkah nya :

Langkah 1 :

Persiapkan logo gambar yang akan kita gunakan sebagai favicon dengan format gambar dan ukuran seperti yang telah saya jelaskan di atas.

Untuk membuat gambar favicon Anda juga bisa menggunakan software Icon Easy Maker yang bisa anda dapatkan di :
http://www.icon-maker.com/download.htm

Atau software Image Editor lain seperti Photosop ACDC dan sebagainya yang support untuk membuat file ICO, GIF atau PNG

Selain itu untuk membuat favicon juga bisa memanfaatkan layanan secara online antara lain :

http://www.favicon.cc/

http://www.favicongenerator.com/

http://www.animatedfavicon.com/

Langkah 2 :

Upload gambar tersebut pada root webhosting kita (di sarankan) , atau juga anda bisa meng uploadnya pada Image hosting lain. Dan catat dapatkan URL dari favicon kita tersebut.

Langkah 3 :

Kemudian persiapkan script tag favicon yang akan kita masukan dengan format script sebagai berikut :

<link rel=”shortcut icon” href=”URL link favicon anda” />

Contoh :

<link href="/YOUR_PATH/favicon.ico" rel="icon" type="image/x-icon" />

Langkah 4:

Masukan script tag favicon tersebut pada bagian header script template website pada blog kita yaitu di antara bagian <head> dan </head>

Pada wordpress sahabat bisa memasukan dengan menggunakan menu Themes editor yaitu pada menu Appearance >> Editor kemudian pilih menu bagian header dan masukan script tersebut dan simpan.

Pada Blogspot atau blogger masuk pada menu Design >> Edit HTML dan masukan script favicon diatas pada bagian di antara <head> dan </head> dan save template sahabat

Pada Blogspot / blogger juga sudah tersedia menu fitur edit favicon yaitu pada menu Design >> Page Elements dan Klik edit pada bagian opsi Favicon. Upload gambar Favicon sahabat dan save.

Langkah 5 :

Done. Buka website atau blog sahabat dan periksa dan cek apakah Favicon sahabat sudah ditampilkan pada address bar browser.

Langkang Pamungkas:

Sahabat cahaya bila ingin percobaan cepat dan mudah bisa menggunakan Favicon saya...hehe
Caranya gampang.ini codenya:

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAAYVeCAKOhoAA/U3cA3uHfAGRefAA3MmYAmoWMADQ8YAAUEiwAFBUsAIF6hwAgM08AmJiYAG5mggCamJgA3NvXALS3tQCQjo0AODBhADYtagD09PQANjteAOPk4AB3e5QA4+XjAOXk4ABxaG4AQDhnANfW0gAvJl8AWld7ABgkSADc3NsAdXOGAEtJZAC1trMAOC5cANzg3gAvOWIAeneAAB8pRQB6dIkAZ1aBAHtxkgBQQnwA+Pf1AFJJdgBYTG0ANURoAKqtqwCDhIMA6OnnAH6AmwDq6uoA1trWACc4YAB0aocA2tvZAO7x7QAqOl0AYV5tAA4QIAAuN10As7a0APLx7QDz8/MALT9jADY4YADh5OIAz8jXAGViggCCg4EA6+zoAOrt6wDs7OgAW1d0AO3t6wDv7OgA2djaADQuVQAbJTsAem55AF1XfQAvOVsATURpANzf3QBlWnQAYFuAALa2tQBzeosATU1pAGZfegBMR3sAk5GQAGdqbgARFy0A4+LmAFFLdQCXlZMAbWp3AEA0cABqaIMAVVR+AHNydADX2tgAiIiIAFxTewBGOXYAX1xyADg2UwAfJ0sALEJlAC1CZQB5eYkA4OPhAJGRkQDj4t4A5ePhANHN1gDm5+QAbG5yAG1sdQA9N3EAbXFyAJyTlwCrsK4AcG57AFdXfwAwJ2YAFyVGALO0sQB3cn4ASEVuAHdujQCJjJ4AdHqNAOPl3wC+tMMAf36HAKirqQB9dpwAhYKBAOjo6ADo6+gA1tTjAO7v6wDt8O4AsLSyALKzrwBzcYUA3d3aAHV4fwBlWX0At7i1AHZ5iwASDzMAHSdWAIuMsQDo6+kA6uvpACcxWQBtY5IAWlZ1AOzs7ABbVn4AMillAJ2cqwBpgYkASUZqALW4tgAvOWgAd3WSAGVhhADj5uQAaWt1AOXp5ABUUnwAbWaKAHNwcgCFeZ4Amp2dAOzv7QBgXWcAeHh4ACw4ZgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB9bGMiSAK1El6OUhsAAAAAZQ4qpbgND3RqszAHAAAAAIRYC61oM5h8eXpVmQAAAABti3tkt18+ryN/KFwAAAAAqaYUZj2CDGBihaOWAAAAAAZMBSVvCpwJnYCBHgAAAAA5UxxQOHAgcblnsWsAAAAAdooTWycxA0OrHzUvAAAAABc0jVehUTwpP12HKwAAAAAXsJ8sbhZUCESeAWEAAAAAGrAmLXKbWogYorJ4AAAAAKhpN4ZNRqyRd0enoAAAAABzrpBKtpO0O5KSSUsAAAAAOlYERa6uGYl1lxAdAAAAAIwyfpRAEaqaWSSDlQAAAAAhpDaPj082QhVOQS4AAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAAA=" rel="icon" type="image/x-icon" />

 Pada Blogspot atau blogger masuk pada menu Design >> Edit HTML dan masukan script favicon diatas pada </head> dan save template sahabat.bila kesulitan mencari  </head> gunakan CTRL +F lalu masukan deh...gampangkan.?

Semoga tutorial tentang cara memasang manual Logo gambar favicon di artikel ESC Creation ini bermanfaat buat kita semua dunia dan akherat...amiiinnn.


SALAM CAHAYA...
AND KEEP YOUR LIGHT...


Tidak ada komentar:

Posting Komentar