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>
<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.
Trim's....:)
0 komentar:
Posting Komentar