Tips WP : Percantik tampilan blog dengan Favicon

July 13, 2008 by Deddy
Filed under: Wordpress 

Favicon atau favorite icon merupakan salah satu aksesoris yang juga merupakan ‘tanda pengenal’ sebuah website. Sebuah icon kecil yang muncul di area tab browser kita, yang akan mempercantik tampilan web kita tersebut.

Untuk membuat favicon hanya dibutuhkan beberapa langkah :
Buat gambar yang akan kita jadikan favicon, ukurannya 16 x 16 pixel, gambar dapat di edit dan resize dengan photoshop, paint, dll.

Ubah format gambar menjadi icon, banyak website yang menyediakan layanan ini, salah satunya html kit, tinggal upload gambar yang tadi kita buat, klik tombol generate, biasanya langsung dikasih nama favicon.ico, jadilah icon kita.

Upload favicon.ico tadi ke server blog sobat, terserah mau diletakan di root atau di sub folder.
Edit file header.php, saya ambil contoh untuk wordpress, login ke admin, cari menu design - theme editor - header.php, tambahkan kode berikut <link rel=”shortcut icon” href=”/favicon.ico” /> diantara <head></head> atau di bawah <title></title>, jadinya kira-kira seperti ini :

<head>
<title><?php bloginfo(’name’); ?></title>
<link rel=”shortcut icon” href=”/favicon.ico” />
</head>

kode href=”” adalah lokasi favicon.ico diletakkan, pada contoh diatas diletakkan di root, sobat bisa juga menuliskannya spt ini href=”http://namadomain/subfolder/favicon.ico”.
Tekan update file. Selesai, refresh blog sobat dan sebuah favicon sudah nongol mempercantik tampilan blog. Tidak sulit kan.

Related Posts
Bookmark and Share:

Tags:

Comments

22 Comments on Tips WP : Percantik tampilan blog dengan Favicon

  1. audy on Sun, 13th Jul 2008 2:48 pm

    2. wah keren ni tips nya….dulu minta tolong temen kasih favicon, sekarang bisa coba ndiri ni….:D thank u paaak..

  2. alex on Mon, 14th Jul 2008 9:48 am

    3. Ass.

    mantab, tambah ilmu da…

    salam kenal

  3. Ronggo on Sun, 20th Jul 2008 4:20 pm

    4. baca
    koment
    praktek

  4. julia on Wed, 23rd Jul 2008 2:45 pm

    5. blog saya bisa di begitukan ga pak?

  5. Deddy on Wed, 23rd Jul 2008 5:27 pm

    6. Bisa dong, gak susah kok, dicoba dulu ya, thanks udh mampir

  6. Christ on Sat, 26th Jul 2008 3:44 pm

    7. Interesting dengan motto webnya pak Learning by doing. Postingannya juga bagus bagus.Success

  7. anton on Wed, 30th Jul 2008 8:09 am

    8. blogwalking…

  8. kipram on Fri, 1st Aug 2008 12:34 am

    9. Wah makasih infonya mas, dari dulu cari tau tentang gambar kecil itu tapi ga ketemu2 apa namanya. baru skarang ketemu

  9. Joe on Sat, 2nd Aug 2008 1:25 am

    10. MaKasih Pak Tas Tips nya..penting bgt bwt saya..

  10. Abi on Sat, 9th Aug 2008 11:11 am

    11. Praktek ah kalau koneksi sudah bener kembali

  11. Catra on Mon, 11th Aug 2008 5:06 am

    12. nice tips pak…. thanks banget

  12. Catra on Mon, 11th Aug 2008 5:56 am

    13. udah dicoba dan di aplot dan diekstrak di root, tapi ga nongol2..

  13. avartara on Fri, 15th Aug 2008 6:47 am

    14. Kunjungan penambah ilmu uda,…. slam,.. bilo pulang lai :)

  14. x-emge on Mon, 18th Aug 2008 3:14 am

    15. makasih sobat..
    aku cobain..

    pemula nich..
    lam kenal..

  15. nandien on Fri, 12th Sep 2008 4:56 am

    16. kak, salam kenal. mau nanya dunks,,,saya sudah coba cara yang kk berikan tapi ko masih ga mau yah? ihiks…

    kalo di header yang ada kaya gini:

    dD : Nandien, salam kenal juga, kalau di Wordpress, di header kira2 spt ini :

    Kalau gambarnya kurang jelas, klik kanan, save image as…buka di program graphic kamu…
    Semoga membantu…
    ________________________________________________________________

    at
    <meta http-equiv=”Content-Type” content=”text/html; charset=” />
    <meta name=”generator” content=”WordPress ” />
    <meta name=”template” content=”K2 ” />
    <meta name=”description” content=”" />

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”" />

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”" />

    <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
    <link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
    <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”" />

    <link rel=”pingback” href=”" />

    <script type=”text/javascript” src=”/js/prototype.js.php”>
    <script type=”text/javascript” src=”/js/effects.js.php”>

    comment_status) or (’comment’ == $post-> comment_type) ) { ?>
    <script type=”text/javascript” src=”/js/k2functions.js”>

    comment_status) or (’comment’ == $post-> comment_type) )) { ?>
    <script type=”text/javascript” src=”/js/ajax_comments.js”>

    <script type=”text/javascript” src=”/js/livesearch.js.php”>
    //<![CDATA[
    window.onload=function() {
    liveSearchInit();
    comment_status) or ('comment' == $post-> comment_type) ) { ?>HideUtils();

    }
    //]]>
    comment_status) or (’comment’ == $post-> comment_type) ) { ?>
    //

    <?php /* Sets Matt’s asides in motion */ function stupid_hack($str) { return preg_replace(’|s*|’, ”, $str); } ob_start(’stupid_hack’); ?>

    <body class=” “>

     

    <li class=”current_page_itempage_item”><a href=”">Blog

    <?php wp_register(”,”); ?>

    _________________________________________________________________

    terus saya menaruh:

    dimana ya?

    terima kasih :)

  16. How to Change Address Bar’s Icon | I smile, do you? :) on Fri, 26th Sep 2008 4:52 am

    17. [...] bar. At least address bar tidak terlalu plain. Saya pun browsing cara mengganti icon tersebut dari sini, sini, dan sini. Sempat masih bingung juga karena tidak menemukan tulisan <head>. [...]

  17. Papa gifta on Thu, 23rd Oct 2008 5:30 am

    18. Thx Tipsnya, mo tanya. Blog saya baru, biar ada d google gmana caranya?, ths

  18. mozink on Sat, 10th Jan 2009 5:56 pm

    19. thanks infona, intinya ditaruh di dalam tag head yah…

  19. Anton on Wed, 14th Jan 2009 2:37 am

    20. Makasiih dan akan saya coba:)
    salam kenal

  20. O. Solihin on Thu, 7th May 2009 7:23 am

    21. Salam kenal. Tipsnya menarik.
    Karena penasaran saya langsung aplikasikan dan ternyata alhamdulillah bisa :-)

    Terima kasih.

    O. Solihin’s last blog post..(Sudah Pasti) Ketinggalan Kereta…

  21. Maraluddin on Fri, 2nd Oct 2009 4:16 pm

    22. thx atas infonya. ditunggu info2 terbaru.

  22. noesa on Sun, 29th Nov 2009 6:04 pm

    23. wihh.. dari kemaren saya nyari-nyari tips ini gak tau nyangkut disini. thanx ya kang. dah mau berbagi.. oya gak keberatan khan klu blognya saya pasang di blogroll saya?? lam kenal noesa. ups.. jalan-jlan ke blog saya klu ada waktu

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!