Menambahkan icon pada website

Icon tidak selalu identik dengan aplikasi desktop, sebuah website maupun blog juga bisa mempunyai icon. Icon ini muncul pada address bar dan tab dari web browser ketika web yang bersangkutan dibuka.

Contohnya blog ini mempunyai icon seperti berikut Favicon. Icon pada website/blog tersebut dikenal sebagai favicon atau favorite icon, fungsinya untuk mempermudah mengidentifikasi suatu website/blog (sebagai tanda pengenal).

Pada artikel ini saya akan membahas bagaimana cara menambahkan icon pada website/blog.

Pertama siapkan dulu gambar icon yang ingin anda gunakan, formatnya harus *.ico dengan ukuran yang tidak terlalu besar.

Kemudian untuk menampilkan icon tersebut pada halaman website gunakan tag berikut

<link rel=”icon” href=”http://url/icon”> atau

<link href=”http://url/icon” rel=”icon” type=”image/vnd.microsoft.icon”/>

Misalkan saya mempunyai icon dengan nama mobil.ico yang terletak di folder gambar, maka saya tulis

<link rel=”icon” href=”http://www.kadekbagus.com/gambar/mobil.ico”>

Letakkan tag tersebut diantara tag buka <head> dan tag tutup </head> dokumen html.

Lalu bagaimana untuk blog? pada intinya sama saja, jika layanan blog anda mempunyai fasilitas untuk mengedit template/CSS/HTML berarti anda bisa mengubah icon blog anda.

Berikut langkah langkah menambahkan favicon pada layanan blogger.com dan self-hosted wordpress.

Pengguna Blogger.com

Caranya buka menu layout > edit HTML.

Khusus untuk blogger gunakan tag berikut :

<link href=”http://url/icon” rel=”icon” type=”image/vnd.microsoft.icon”/>

ketikan dibawah tag <title> yang ada di antara tag <head>

Self-Hosted WordPress

Caranya buka menu design > theme editor > pilih Header (header.php).

Cari bagian <head> lalu ketikan kode :

<link rel=”icon” href=”http://url/icon”> atau

<link href=”http://url/icon” rel=”icon” type=”image/vnd.microsoft.icon”/>

Untuk wordpress versi 2.7 caranya buka menu appearance > lalu pilih editor.

Bagi anda pengguna wordpress.com anda harus mengupgrade membership supaya bisa mengedit template.

Selain sebagai tanda pengenal, dengan memasang favicon membuat suatu website/blog menjadi lebih ekslusif dimata para visitor (pengunjung).

This entry was posted in html and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

8 Comments

  1. Posted January 10, 2009 at 6:17 pm | Permalink

    helo bro

  2. Posted January 11, 2009 at 3:49 am | Permalink

    Wow… Bagus tipsnya…

    Hehe.. Salam kenal juga yach…

  3. Posted January 18, 2009 at 8:16 am | Permalink

    Thanks bro….terus buat artikel yo..

    Oy, masukan artikel buat YM donk…

    hi2xxx

  4. Posted April 7, 2009 at 6:47 pm | Permalink

    ????:) ???? ??????, ? ?? ?????????? ???-?? ?? ????? ?????????? ?????.

  5. Posted April 15, 2009 at 10:07 pm | Permalink

    wah bagus nih
    buat mempercantik website

  6. Posted August 31, 2009 at 8:27 pm | Permalink

    Sebera dicoba..! :D

  7. Posted October 30, 2009 at 12:41 am | Permalink

    klo icon di pasang di situs WAP bs gk? klo bs caranya sama ato tdk?

  8. Posted October 30, 2009 at 6:34 am | Permalink

    @heri05
    klo pke WAP saya blm pernah coba… 8O

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: