Tips menampilkan favicon
Dalam pelajaran HTML kali ini kita akan mempelajari tentang bagaimana cara menampilkan Favicon di browser.
Favicon adalah sebuah icon image yang berukuran kecil yang ditampilkan di address bar dan tab browser.
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-ekstension .ico tersebut yang standart 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 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 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.
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.
Asiik..
Bsa bwad web aku yg len nh..
on August 26th, 2008 at 3:52 pm
Ni org dah ga d ragukan lg kemapuany soal bwt situs, kirim alamt emailny donk ke email aq, biar aq bisa tnya2 om, thankz.
on November 30th, 2008 at 7:18 am
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
on December 14th, 2008 at 11:25 am
Hi 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" />
on December 17th, 2008 at 5:47 pm
Hi,
Where are you from? Is it a secret?
on May 14th, 2009 at 10:02 am
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 me.
on May 14th, 2009 at 1:55 pm
Pake ekstensi lain untuk favicon ga papa, kan? Misalnya, favicon.jpg atau favicon.png.
on September 6th, 2009 at 4:28 pm