Tips menampilkan favicon

Dalam pelajaran HTML kali ini kita akan mempelajari tentang bagaimana cara menampilkan Favicon di browser.

Favicon (Favourite Icon) adalah sebuah icon image yang berukuran kecil yang ditampilkan di address bar dan tab browser.

favicon

Dengan adanya favicon ini memang kelihatan menarik, bahkan kita bisa hafal suatu situs web dengan hanya melihat favicon-nya, jika kita memiliki banyak bookmark di browser kita, maka kita akan melihat beraneka ragam favicon disana.

Lantas bagaimana cara menampilkan favicon tersebut?

Pertama, anda harus memiliki gambar yang ber-ekstensi .ico, yang standar ukurannya sekitar 16X16px, program grafik seperti Photoshop atau Corel Draw bisa membuat jenis file ini, namun jika anda ingin yang siap saji anda bisa mendownload dari freefavicon, ratusan favicon menarik dapat anda temukan disana.

Jika anda sudah menemukan icon yang anda sukai, download dan simpan icon tersebut ke komputer anda dengan nama “favicon.ico”

Selanjutnya agar dokumen html dapat menampilkan icon ini, kita harus menambahkan kode berikut ini di antara tag elemen <head> dan </head>:

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

Setelah dimasukkan kedalam dokumen html maka akan terlihat seperti dibawah ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel Websiteku</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
</head>
<body>
<p>Harap tenang... saya sedang belajar tentang favicon</p>
</body>
</html>

Buka Notepad kemudian salin kode diatas dan simpan ke komputer dengan nama “testicon.html” jangan lupa agar menyimpannya di folder yang sama dengan favicon.ico tadi.

Selanjutnya dengan browser buka file “testicon.html” tersebut, maka jika anda melakukannya dengan benar maka favicon tersebut akan tampil di address bar dan tab browser seperti berikut ini.

Preview

Memasukkan kode favicon ke WordPress secara manual.

Caranya adalah dengan memasukkan favicon.ico tersebut ke folder themes favourite kita, kemudian buka file “header.php” dan masukkan kode berikut ini diantara tag elemen <head> dan </head>:

<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />

Cara ini tidak bisa dilakukan di WordPress.com, karena kita tidak diizinkan untuk mengedit template.

Bila ingin mengganti favicon di Blogger ini ada artikel yang lumayan detil Menampilkan Faviocon pada Blog.

Posted on May 10th, 2008 in Belajar HTML by Masim man

No Related Post Found.

Post a comment

11 Responses to “Tips menampilkan favicon”

  1. Arikaka said:

    Asiik..

    Bsa bwad web aku yg len nh..

  2. Zabri said:

    Ni org dah ga d ragukan lg kemapuany soal bwt situs, kirim alamt emailny donk ke email aq, biar aq bisa tnya2 om, thankz.

  3. renny said:

    aku masih bingung nih… pada bloginfo (‘template_url’) itu di isi alamat iconnya ya… misalkan gini
    http://www.ssss.com/favicon.ico gitu ?
    thanks infonya

    • Masim man said:

      Hai Renny,

      Jika kamu memasukkan icon-nya di folder themes, kamu tidak perlu mengubah kodenya, copy paste aja langsung kode berikut ke dalam header.php

      <link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />

      Cara kedua:

      Kamu juga bisa langsung upload icon-nya ke root server, cth: http://www.ssss.com/favicon.ico
      Kemudian masukkan kode berikut di header.php

      <link rel="shortcut icon" type="image/ico" href="http:./www.ssss.com/favicon.ico" />
  4. Jinny said:

    Hi,
    Where are you from? Is it a secret? 🙂

    • Masim man said:

      Hi Jinny, thanks for asking…

      Well, if you curious to know where I come from, just type my nickname in Google search with quotations and I am sure that you will find a little bit about myself. 🙂

  5. dirgita said:

    Pake ekstensi lain untuk favicon ga papa, kan? Misalnya, favicon.jpg atau favicon.png.

    • Masim man said:

      Kalo untuk icon animasi bisa menggunakan gif dengan mengubah ektensinya menjadi ico, kalo format lain belum pernah nyoba. Kalo pun gak bisa banyak koq favicon generator di internet, tinggal upload gambarbya.

  6. san'z said:

    mas kalo arti dari <link rel=
    artinya apa?

    • Masim man said:

      Kalo rel itukan kependekan dari relationship, yang artinya hubungan. Jadi dapat diartikan sebagai hubungan link tersebut dengan sumber-sumber terkait atau dengan dokumen-dokumen lainnya.

  7. jojo said:

    muncul gak ya deg deg syurrr

Back to top